<!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 () {
var x = 50+Math.floor(Math.random()*300)+radius*Math.sin(a*(Math.PI/180));
var y = 50 + Math.floor(Math.random()*300)+radius*Math.cos(a*(Math.PI/180));
draw_circle(x,y,"green");
a+=5;
if (a > 360)
{
a = 0;
}
},100);
</script>
</body>
</html>
| 