canvas 旋轉角度不需要累加

admin發表於2019-08-24
Canvas

如果您感覺一些程式碼比較奇怪，可能有如下幾種可能：

（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()旋轉是對座標系的旋轉，可以認為每一次旋轉後都"歸零"。

再次旋轉就以新的座標系為參考，而不是以最初的座標系為參考，所以無需進行累加。

相關文章