canvas rotate()

admin發表於2019-08-23
Canvas

rotate方法可以將canvas圖片圍繞原點旋轉指定的弧度。

關於原點的概念可以參閱canvas座標系原點一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.rotate(angle);

特別說明：angle是要旋轉的弧度，不要理解成角度，後面會給出換算公式。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（2）.谷歌瀏覽器支援此方法。

（3）.火狐瀏覽器支援此方法。

（4）.Opera瀏覽器支援此方法。

（5）.Safari瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload= () => {
  let cvs=document.getElementById("myCanvas");
  let ctx=cvs.getContext("2d");
  ctx.rotate(20*Math.PI/180);
  ctx.fillRect(50,20,100,50);
}
</script>
</head>
<body>
<canvas id="myCanvas">當前瀏覽器不支援此標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/23/210403sid4lao8ai9589lm.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

canvas圖片會圍繞著左上角原點進行旋轉，旋轉了20度角，下面給出弧度與度的換算公式。

（1）.假設要旋轉的角度是degrees。

（2）.那麼換算成弧度就是degrees*Math.PI/180。

（3）.上述程式碼中藥旋轉20度，那麼就是20*Math.PI/180。

前文已經介紹過，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 #d3d3d3;
  width:300px;
  height:150px;
}
</style>
<script>
window.onload= () => {
  let cvs=document.getElementById("myCanvas");
  let ctx=cvs.getContext("2d");
  
  ctx.fillRect(50,20,100,50);
  
  ctx.fillStyle = 'red';
  ctx.rotate(48*Math.PI/180);
  ctx.fillRect(50,20,100,50);
}
</script>
</head>
<body>
  <canvas id="myCanvas">當前瀏覽器不支援此標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/23/210434ser5nozzjujuqtdh.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.上述程式碼是為了演示旋轉是圍繞畫布原點進行的，而不是圖形左上角。

（2）.黑色矩形演示了圖形的預設位置。

（3）.紅色矩形這是旋轉48度角後的位置，如果是圍繞自身的左上角旋轉，絕對不會在這個位置。

有時候我們期望矩形能夠圍繞自身的中心位置進行旋轉，考慮到本文的篇幅問題，不在這裡介紹了。

關於圍繞自身中心位置旋轉可以參閱canvas 圍繞中心位置旋轉一章節。

相關文章