Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    HTML5_Lab Programs

    Uploaded by

    deepak chinagi

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    HTML5_Lab Programs

    Uploaded by

    deepak chinagi
    2 views21 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views21 pages

    HTML5_Lab Programs

    Uploaded by

    deepak chinagi

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 21

    Write a program to create a Line and Rectangle using HTML5-SVG.

    <!DOCTYPE html>
    <html>
    <head>
    <title>SVG Line and Rectangle</title>
    </head>
    <body>
    <svg width="400" height="400">
    <!-- Create a line -->
    <line x1="50" y1="50" x2="250" y2="50" stroke="black" stroke-
    width="2" />
    <!-- Create a rectangle -->
    <rect x="50" y="100" width="200" height="100" fill="blue"
    stroke="black" stroke-width="2" />
    </svg>
    </body>
    </html>
    Write a program to create a polygon, polyline HTML5-SVG.
    <!DOCTYPE html>
    <html>
    <head>
    <title>SVG Polygon and Polyline</title>
    </head>
    <body>
    <svg width="400" height="400">
    <!-- Create a polygon -->
    <polygon points="100,50 200,10 300,50 350,200 250,200" fill="yellow"
    stroke="black" strokewidth="2" />
    <!-- Create a polyline -->
    <polyline points="100,300 150,350 200,300 250,350 300,300"
    fill="none" stroke="blue" strokewidth="2" />
    </svg>
    </body>
    </html>
    Write a program to create a star using HTML5-SVG.
    <!DOCTYPE html>
    <html>
    <head>
    <title>SVG Star</title>
    </head>
    <body>
    <svg width="400" height="400">
    <polygon points="200,50 237.5,162.5 362.5,162.5 262.5,237.5 300,350
    200,275 100,350 137.5,237.5
    37.5,162.5 162.5,162.5"
    fill="yellow" stroke="black" stroke-width="2" />
    </svg>
    </body>
    </html>
    Write a program to create a Line and Rectangle using HTML5-CANVAS.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Line and Rectangle</title>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Draw a line
    ctx.beginPath();
    ctx.moveTo(50, 50); // Starting point of the line
    ctx.lineTo(200, 50); // Ending point of the line
    ctx.lineWidth = 2; // Set the line width
    ctx.strokeStyle = "blue"; // Set the line color
    ctx.stroke();
    // Draw a rectangle
    ctx.beginPath();
    ctx.rect(50, 100, 200, 100); // x, y, width, height
    ctx.lineWidth = 2; // Set the line width
    ctx.strokeStyle = "red"; // Set the line color
    ctx.fillStyle = "yellow"; // Set the fill color
    ctx.fill();
    ctx.stroke();
    </script>
    </body>
    </html>
    Write a program to create Bezier Curves using HTML5-CANVAS.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Bezier Curves</title>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Quadratic Bezier Curve
    ctx.beginPath();
    ctx.moveTo(50, 200); // Starting point
    ctx.quadraticCurveTo(200, 50, 350, 200); // Control point, Ending point
    ctx.lineWidth = 2; // Set the line width
    ctx.strokeStyle = "blue"; // Set the line color
    ctx.stroke();
    // Cubic Bezier Curve
    ctx.beginPath();
    ctx.moveTo(50, 300); // Starting point
    ctx.bezierCurveTo(150, 200, 250, 400, 350, 300); // Control point 1,
    Control point 2, Ending point
    ctx.lineWidth = 2; // Set the line width
    ctx.strokeStyle = "red"; // Set the line color
    ctx.stroke();
    </script>
    </body>
    </html>
    Write a program to create Draw Linear Gradient using HTML5-
    CANVAS.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Linear Gradient</title>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Create a linear gradient
    var gradient = ctx.createLinearGradient(0, 0, 400, 0); // (x0, y0, x1, y1)
    // Define gradient colors
    gradient.addColorStop(0, "red");
    gradient.addColorStop(0.5, "green");
    gradient.addColorStop(1, "blue");
    // Fill a rectangle with the gradient
    ctx.fillStyle = gradient;
    ctx.fillRect(50, 50, 300, 200);
    </script>
    </body>
    </html>
    Write a program to rectangle translation using HTML5-CANVAS.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Rectangle Translation</title>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Initial position and size of the rectangle
    var x = 50;
    var y = 50;
    var width = 100;
    var height = 50;
    // Function to draw the rectangle at the current position
    function drawRectangle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = "blue"; // Set the fill color
    ctx.fillRect(x, y, width, height); // Draw the rectangle
    }
    // Function to handle the translation of the rectangle
    function translateRectangle(dx, dy) {
    x += dx; // Update the x position
    y += dy; // Update the y position
    drawRectangle(); // Redraw the rectangle at the new position
    }
    // Initial drawing of the rectangle
    drawRectangle();
    // Move the rectangle using arrow keys
    window.addEventListener("keydown", function (event) {
    var step = 10; // Step size for translation
    switch (event.keyCode) {
    case 37: // Left arrow key
    translateRectangle(-step, 0);
    break;
    case 38: // Up arrow key
    translateRectangle(0, -step);
    break;
    case 39: // Right arrow key
    translateRectangle(step, 0);
    break;
    case 40: // Down arrow key
    translateRectangle(0, step);
    break;
    }
    });
    </script>
    </body>
    </html>
    Write a program to rectangle rotation using HTML5-CANVAS.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Rectangle Rotation</title>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Initial position and size of the rectangle
    var x = 150;
    var y = 150;
    var width = 100;
    var height = 50;
    var angle = 0; // Initial rotation angle
    // Function to draw the rotated rectangle
    function drawRotatedRectangle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    // Translate to the center of the rectangle
    ctx.translate(x + width / 2, y + height / 2);
    // Rotate the canvas
    ctx.rotate((Math.PI / 180) * angle);
    // Draw the rectangle
    ctx.fillStyle = "blue"; // Set the fill color
    ctx.fillRect(-width / 2, -height / 2, width, height);
    // Reset the transformations
    ctx.rotate(-(Math.PI / 180) * angle);
    ctx.translate(-(x + width / 2), -(y + height / 2));
    }
    // Function to handle the rotation of the rectangle
    function rotateRectangle(dAngle) {
    angle += dAngle; // Update the rotation angle
    drawRotatedRectangle(); // Redraw the rotated rectangle
    }
    // Initial drawing of the rotated rectangle
    drawRotatedRectangle();
    // Rotate the rectangle using arrow keys
    window.addEventListener("keydown", function (event) {
    var rotationAngle = 10; // Angle of rotation in degrees
    switch (event.keyCode) {
    case 37: // Left arrow key
    rotateRectangle(-rotationAngle);
    break;
    case 39: // Right arrow key
    rotateRectangle(rotationAngle);
    break;
    }
    });
    </script>
    </body>
    </html>
    Write a program to rectangle scaling using canvas.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Rectangle Scaling</title>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Initial position and size of the rectangle
    var x = 100;
    var y = 100;
    var width = 100;
    var height = 50;
    // Function to draw the rectangle
    function drawRectangle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = "blue"; // Set the fill color
    ctx.fillRect(x, y, width, height); // Draw the rectangle
    }
    // Function to handle the scaling of the rectangle
    function scaleRectangle(scaleFactor) {
    width *= scaleFactor; // Update the width
    height *= scaleFactor; // Update the height
    drawRectangle(); // Redraw the rectangle with the new size
    }
    // Initial drawing of the rectangle
    drawRectangle();
    // Scale the rectangle using arrow keys
    window.addEventListener("keydown", function (event) {
    var scaleStep = 0.1; // Step size for scaling
    switch (event.keyCode) {
    case 37: // Left arrow key
    scaleRectangle(1 - scaleStep); // Shrink width
    break;
    case 38: // Up arrow key
    scaleRectangle(1 + scaleStep); // Enlarge height
    break;
    case 39: // Right arrow key
    scaleRectangle(1 + scaleStep); // Enlarge width
    break;
    case 40: // Down arrow key
    scaleRectangle(1 - scaleStep); // Shrink height
    break;
    }
    });
    </script>
    </body>
    </html>
    Write a program to rotate a small image repeatedly using HTML5-
    CANVAS Animation.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
    // Get the canvas element and its 2D context
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // Load the image
    var image = new Image();
    image.src = "path/to/your/image.png";
    image.onload = function() {
    // Start the animation once the image is loaded
    requestAnimationFrame(animate);
    };
    var angle = 0; // Initial rotation angle
    function animate() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Save the current state of the canvas
    ctx.save();
    // Translate to the center of the canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);
    // Rotate the canvas by the current angle
    ctx.rotate((Math.PI / 180) * angle);
    // Draw the image at its center
    ctx.drawImage(
    image,
    -image.width / 2,
    -image.height / 2,
    image.width,
    image.height
    );
    // Restore the canvas state
    ctx.restore();
    // Update the angle for the next frame
    angle += 1;
    // Request the next animation frame
    requestAnimationFrame(animate);
    }
    </script>
    </body>
    </html>

    You might also like