HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）

前端技术 2023/08/07 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 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>

   

本文地址：https://www.stayed.cn/item/408

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案