<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="700" height="600"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "30px Arial";
var a = 0;
var radius = 20;
function draw_circle(x,y,color){
context.beginPath();
context.arc(x,y, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
}
setInterval(function () {
context.clearRect(0,0,700,600);
var x = 250+radius*Math.sin(a*(Math.PI/180));
var y = 250+radius*Math.cos(a*(Math.PI/180));
radius = Math.floor(Math.random()*200);
draw_circle(x,y,"green");
radius = Math.floor(Math.random()*200);
draw_circle(x+10,y+10,"blue");
a+=5;
if (a > 360)
{
r = 200;
a = 0;
}
},100);
</script>
</body>
</html>
| 