We can do animation on canvas.
The following code shows how to animate along x.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
<!--from www . ja v a 2s. c o m-->
var x = 0;
function drawIt() {
window.requestAnimationFrame(drawIt);
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.clearRect(0,0,canvas.width,canvas.height);
c.fillStyle = "red";
c.fillRect(x,50,80,100);
x+=2;
}
drawIt();
</script>
</body>
</html>
The code above is rendered as follows:
The following code shows how to draw a circle in animation.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
<!-- w w w. j a v a 2 s .c o m-->
function calc(myVal) {
var radius = 70;
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(140, 140, 50, myVal * Math.PI, 0, true);
ctx.lineWidth = 10;
ctx.stroke();
};
var count = 0;
var parsedCount;
function go(){
if (count <= 200) {
parsedCount = count*.01
calc(parsedCount);
count++;
}
}
setInterval(go, 100)
</script>
</body>
</html>
The code above is rendered as follows:
The following code shows how to draw circle after circle in animation.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
function draw(radius) {<!-- w w w . j av a 2 s.c om-->
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 190,
y = 140;
var start_angle = 1.5 * Math.PI;
var end_angle = 1.5 * Math.PI;
var increase_end_angle = 0;
setInterval(function () {
context.save();
context.clearRect(0, 0, 500, 400);
context.beginPath();
increase_end_angle = increase_end_angle + 11 / 500;
dynamic_end_angle = end_angle + increase_end_angle;
context.arc(x, y, radius, start_angle, dynamic_end_angle, false);
context.stroke();
context.restore();
if (dynamic_end_angle > 3.5 * Math.PI) {
increase_end_angle = 0;
draw(radius + 10);
}
}, 3);
}
draw(30);
</script>
</body>
</html>
The code above is rendered as follows:
The following code shows how to animate rotation.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
<!--from w w w .j av a2s . c o m-->
var w = 500;
var h = 200;
setInterval(animate, 50);
var r = 0;
var ctx = canvas.getContext("2d");
function animate() {
ctx.clearRect(0, 0, w, h);
ctx.save();
ctx.translate(200, 200);
ctx.rotate(r);
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
r += 0.1;
}
</script>
</body>
</html>
The code above is rendered as follows:
The following code shows how to change color in animation.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
<!--from ww w. j a v a 2 s . c o m-->
var i = 0;
function drawThings(context) {
context.fillStyle = i === 0 ? 'red' : 'blue';
context.fillRect(0,0,50,50);
if (i === 0)
i = 1;
else
i = 0;
}
setInterval(function() {drawThings(context);}, 100)
</script>
</body>
</html>
The code above is rendered as follows: