首页 > 其他 > 详细

canvas绘制椭圆

时间:2019-02-25 19:47:08      阅读:173      评论:0      收藏:0      [点我收藏+]
<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>

 

canvas绘制椭圆

原文:https://www.cnblogs.com/tongyuzhe/p/10432892.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!