canvas translate()

admin發表於2019-08-23
Canvas

translate方法可以實現圖案在畫布中的位移，這是其最為直觀的功能。

在視覺上確實看到圖案產生了位移，但是實質是對畫布整個座標系的移動。

此方法重新對映畫布上的 (0,0) 位置，更多內容可以參閱canvas座標系原點一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.translate(x,y);

引數解析：

（1）.x：規定座標系在x軸位移的尺寸。

（2）.y：規定座標系在y軸位移的尺寸。

瀏覽器相容：

（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("ant");
  let ctx=cvs.getContext("2d");

  ctx.fillRect(10,10,100,50);

  ctx.translate(70,70);
  ctx.fillStyle = 'red';
  ctx.fillRect(10,10,100,50);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

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

程式碼分析如下：

（1）.預設，畫布座標系的原點（0,0）在畫布的左上角。

（2）.以預設座標系為參考繪製了一個黑色的矩形，非常容易理解。

（3）.ctx.translate(70,70)方法可以將畫布原來的座標系的原點分別向左和向下移動70畫素。

（4）.需要注意的是經過移動後，當前座標系的原點座標值是(0,0) ,不要誤認為是（70,70）。

（5）.然後再依照這個新的原點位置為參考，進行繪製，於是就出現紅色矩形。

特別說明如下兩點：

（1）.座標系的移動對之前已經繪製好的圖案沒有影響，比如對黑色圖案沒有影響。

（2）.座標系的原點位置始終是(0,0)，是座標系的整體移動，只是相對於最初的座標系來說位置變為(70,70)。

相關文章