用canvas画转动的阴阳鱼（代码教程）

17-11-20 来源：[db:作者]
收藏我要投稿
先放代码：
<!DOCTYPE htnl>
<html>
<head>
    <title>revolve circle</title>
    <script>
        var drawingCircle = function(x,y,r,begin,end,yn,color,ctx){
        //yn为1画填充圆，为0画不填充圆，color为1颜色为黑，0颜色为白
            if(yn==1){
                ctx.beginPath();
                ctx.arc(x,y,r,begin,end,true);
                if(color==1)
                    ctx.fillStyle = "black";
                else
                    ctx.fillStyle = "white";
                ctx.fill();
            }
            else{
                ctx.beginPath();
                ctx.arc(x,y,r,begin,end,true);
                ctx.stroke();
            }
        }
        var drawing = function(){
            var can = document.getElementById("canvas");
            var ctx = can.getContext("2d");
            var degree = 0;
            var y1 = 0;
            var x1 = 0;
            var y2 = 0;
            var x2 = 0;


            setInterval(function(){
            ctx.clearRect(0,0,200,200);

            y1 = 100-Math.cos(degree)*45;
            x1 = 100+Math.sin(degree)*45;
            y2 = 100+Math.cos(degree)*45;
            x2 = 100-Math.sin(degree)*45;

            drawingCircle(100,100,90,90*Math.PI/180+degree,-90*Math.PI/180+degree,1,1,ctx);
            drawingCircle(100,100,90,-90*Math.PI/180+degree,90*Math.PI/180+degree,0,0,ctx);

            drawingCircle(x1,y1,45,120*Math.PI/180+degree,-120*Math.PI/180+degree,1,0,ctx);
            drawingCircle(x2,y2,45,-60*Math.PI/180+degree,60*Math.PI/180+degree,1,1,ctx);

            drawingCircle(x1,y1,11,0*Math.PI/180,360*Math.PI/180,1,1,ctx);
            drawingCircle(x2,y2,11,0*Math.PI/180,360*Math.PI/180,1,0,ctx);



            degree = degree + 1*Math.PI/180;
            if(degree==360*Math.PI/180)
                degree=0;
            }
            ,30)

        }
        window.onload = drawing;
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="200" style = "border:1px dashed gray;"></canvas>
</body>
</html>
点击复制链接与好友分享!回本站首页