canvas 圖形圍繞中心旋轉

admin發表於2019-08-24
Canvas

通過rotate()方法可以實現圖案的旋轉功能。

上述方法具體使用可以參閱canvas rotate()一章節。

預設，圖案是圍繞畫布座標系的原點進行旋轉，很多時候可能需要圍繞圖案的中心旋轉。

本文以矩形圖案圍繞其中心點進行旋轉進行一下介紹。

程式碼例項如下：

[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:3:{s:3:\"pic\";s:43:\"portal/201908/24/134017mis15oikhq3khz7w.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面只是一個靜態示意圖，實際程式碼能夠讓矩形圍繞其中心旋轉。

程式碼分析如下：

首先要明確translate()和rotate()方法都是對於座標系的操作。

[JavaScript] 純文字檢視 複製程式碼
ctx.translate(100,50);

預設，畫布的原點位置在左上角（0,0）位置。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/24/134042k4x4uaguuncxxucx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過上述程式碼可以將畫布座標系的原點位置移動到原來座標系的(100,50)位置。

[JavaScript] 純文字檢視 複製程式碼
let angle=10;

既然rotate()方法也是對座標系的操作，上述程式碼規定每次座標系旋轉的角度。

[JavaScript] 純文字檢視 複製程式碼
ctx.rotate(angle*Math.PI/180);

有朋友可能要問，為什麼旋轉的角度不用累加，因為旋轉對座標系的操作，所以無需累加。

上述程式碼可以將整個座標系旋轉angle度角。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/24/134213a3pdvzchp3vz33pl.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼演示了將座標系旋轉一定的角度。

[JavaScript] 純文字檢視 複製程式碼
ctx.fillRect(-50,-25,100,50);

採用上述程式碼繪製一個黑色的矩形，如果不專門設定填充色，預設為黑色。

在一個傾斜的座標系繪製圖案，圖案預設也是傾斜的。

矩形的繪製起始座標是（-50,-25），特別注意的是現在是以新的座標系原點為參考，而不是原來的左上角。

很明顯分別從x軸和y軸的反方向50和25畫素出開始繪製，矩形的中心恰好與座標系中心重合。

[JavaScript] 純文字檢視 複製程式碼
ctx.clearRect(-100,-50,200,100);

上述程式碼是將上一次繪製的圖案擦除，你也可以精確設定擦除的區域，也可以設定一個大區域保證擦除效果。

相關文章