关于HTML5 Canvas旋转动画的2个例子

效果图：

方法一：

!DOCTYPE HTML>
       html>
       body>
       canvas id="myCanvas" width="500" height="500">
    your browser does not support the canvas tag/canvas>
       script type="text/javascript">
       VAR deg = 0;
       var r = 30;
       var rl = 100;
   function drawTaiji() {
       var canvas = document.getElementById('myCanvas');
       var context = canvas.getContext('2d');
       var colorA = "rgb(0, 0, 0)";
       var colorB = "red";
       var px =Math.sin(deg)*r;
       var py =Math.cos(deg)*r;
       context.clearRect(0, 0, 300, 300);
       context.beginPath();
       context.fillStyle = colorA;
       context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true);
       context.closePath();
       context.fill();
       context.fillStyle = colorB;
       context.beginPath();
       context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true);
       context.closePath();
       context.fill();
       context.fillStyle = colorB;
       context.beginPath();
       context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
       context.closePath();
       context.fill();
       context.fillStyle = colorA;
       context.beginPath();
       context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
       context.closePath();
       context.fill();
       context.fillStyle = colorA;
       context.beginPath();
       context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true);
       context.closePath();
       context.fill();
       context.fillStyle = colorB;
       context.beginPath();
       context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true);
       context.closePath();
       context.fill();
       deg +=0.1;
   }
       setInterval(drawTaiji, 100);
      /script>
     /p>
    p>
    /body>
       /html>
    

方法二：

!DOCTYPE HTML>
       html>
       body>
       canvas id="myCanvas" width="500" height="500" >
    your browser does not support the canvas tag /canvas>
       script type="text/javascript">
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext("2d");
       var angle = 0;
       var count = 360;
       var clrA = '#000';
       var clrB = 'red';
   function taiji(x, y, radius, angle, wise) {
       angleangle = angle || 0;
       wisewise = wise ? 1 : -1;
       ctx.save();
       ctx.translate(x, y);
       ctx.rotate(angle);
       ctx.fillStyle = clrA;
       ctx.beginPath();
       ctx.arc(0, 0, radius, 0, Math.PI, true);
       ctx.fill();
       ctx.beginPath();
       ctx.fillStyle = clrB;
       ctx.arc(0, 0, radius, 0, Math.PI, false);
       ctx.fill();
       ctx.fillStyle = clrB;
       ctx.beginPath();
       ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);
       ctx.fill();
       ctx.beginPath();
       ctx.fillStyle = clrA;
       ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);
       ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
       ctx.fill();
       ctx.beginPath();
       ctx.fillStyle = clrB;
       ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
       ctx.fill();
       ctx.reStore();
   }
   loop = setInterval(function () {
       beginTag = true;
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       taiji(200, 200, 50, Math.PI * (angle / count) * 2, true);
       //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);
       angle = (angle + 5) % count;
   }
    , 50);
       /script>
     /p>
    p>
    /body>
       /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用HTML5 canvas实现雪花飘落

如何使用jquery和HTML5实现手机摇一摇的换衣特效

以上就是关于HTML5 Canvas旋转动画的2个例子的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！