Scribd
Upload
16 views

HTML5 - Lab Programs

Uploaded by

deepak chinagi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

HTML5 - Lab Programs

Uploaded by

deepak chinagi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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