- <canvas style="border: red solid 3px;" id='canvas' width='500' height='500'></canvas>
- <script>
- var canvas = document.getElementById('canvas'),
- context = canvas.getContext('2d'),
- WIDTH = canvas.width,
- HEIGHT = canvas.height,
- PI = Math.PI,
- P0 = 0,
- P1 = 0,
- Z0 = 9;
- Z1 = 3;
- function main(){
- context.clearRect(0,0,WIDTH,HEIGHT);// 清空画布
- context.beginPath();// 开始绘制一条路径
- context.arc(
- Math.cos(P0+=0.01*PI/2).toFixed(4)*WIDTH/Z1+WIDTH/2,
- Math.sin(P1+=0.01*PI/2).toFixed(4)*HEIGHT/Z0+HEIGHT/2,
- 10,
- 0.0*PI,
- 2.0*PI
- );//arc(圆的 x 坐标, 圆的 y 坐标, 圆的半径, 起始角, 结束角)
- context.fill();
- }
- setInterval(main,5);
- </script>
来源: http://www.bubuko.com/infodetail-2967604.html