Q4) Advin is a web developer and has been assigned a task to rotate an image on canvas,
as shown in the following figure.Help advin to perform this task.
Prerequisite: To perform this exercise, you need to use the image file, car.gif.
Ans4)
<html>
<head>
<title></title>
<script type="text/javascript">
var can, ctx, sprite,
x, y, rot = 0;
function init(){
sprite = document.getElementById("Sprite");
can = document.getElementById("canvas");
ctx = can.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "12pt helvetica";
ctx.textBaseline = "top";
x = 100;
y = 0;
rot = 240;
drawSprite();
function drawSprite() {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot);
ctx.drawImage(sprite, 0, 0);
ctx.restore();
}
</script>
</head>
<body onload="init()">
<h2>Rotating Image</h2>
<canvas id="canvas" height="800" width="800">
</canvas>
<img id="sprite" src="car.gif" style="display:none">
</body>
</html>
as shown in the following figure.Help advin to perform this task.
Prerequisite: To perform this exercise, you need to use the image file, car.gif.
Ans4)
<html>
<head>
<title></title>
<script type="text/javascript">
var can, ctx, sprite,
x, y, rot = 0;
function init(){
sprite = document.getElementById("Sprite");
can = document.getElementById("canvas");
ctx = can.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "12pt helvetica";
ctx.textBaseline = "top";
x = 100;
y = 0;
rot = 240;
drawSprite();
function drawSprite() {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot);
ctx.drawImage(sprite, 0, 0);
ctx.restore();
}
</script>
</head>
<body onload="init()">
<h2>Rotating Image</h2>
<canvas id="canvas" height="800" width="800">
</canvas>
<img id="sprite" src="car.gif" style="display:none">
</body>
</html>
latest exams, projects, assignments, lab@home and much more visit https://mkbloggers.blogspot.com/
ReplyDelete