canvas 旋转角度不需要累加

2019-8-24 16:01| 作者: admin| 查看: 635| 评论: 0|来自: 蚂蚁部落

如果您感觉一些代码比较奇怪,可能有如下几种可能:

(1).代码确实比较奇怪。

(2).对于代码原理不够了解。

本文分享一段通过canvas绘制旋转图案的代码。

它实现了每隔指定时间旋转一定角度的功能,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid black;
}  
</style>
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
 
  ctx.translate(100,50);
  let angle=10;
 
  let rotate = () => {
    ctx.clearRect(-100,-50,200,100);
    ctx.rotate(angle*Math.PI/180);
  
    ctx.fillRect(-50,-25,100,50);
    setTimeout(rotate,16);
  }
  rotate()
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

上述代码实现了矩形图案的旋转效果。

但是有没有发现一个奇怪的现象,角度不用累加。

比如其他效果如果需要实现这种类似的效果,可能需要a=a+1类似累加。

这是因为rotate()旋转是对坐标系的旋转,可以认为每一次旋转后都"归零"。

再次旋转就以新的坐标系为参考,而不是以最初的坐标系为参考,所以无需进行累加。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部