canvas旋转太极图效果

快乐打工仔 分类:实例代码

canvas旋转太极图效果属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了太极八卦图的旋转效果,感兴趣的朋友可以做一下分析。

代码如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.pipipi.net/" />   
<title>犀牛前端部落</title>  
</head>
<body> 
<canvas id="myCanvas" width="500" height="500" >浏览器不支持</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); 
  angle = (angle + 5) % count; 
}, 50); 
</script>
</body> 
</html>

canvas旋转太极图效果,这样的场景在实际项目中还是用的比较多的,关于canvas旋转太极图效果就介绍到这了。

回复

我来回复
  • 暂无回复内容