canvas绘制椭圆

<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>

 

转载于:https://www.cnblogs.com/tongyuzhe/p/10432892.html