Canvas画太极图并旋转

最新推荐文章于 2024-07-20 17:03:08 发布

weixin_39616739

最新推荐文章于 2024-07-20 17:03:08 发布

阅读量440

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/weixin_39616739/article/details/94338515

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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); //黑色大半圆 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>