HTML canvas translate()方法用于指定對象以給定的轉換量進行轉換。

用法:

context.translate(x, y)

參數值：

x:它存儲值，即畫布將向左或向右移動多少表示x軸方向。

y:它存儲值，即畫布將上下移動多少意味著y軸方向。

范例1：您可以在此處通過更改x軸和y軸進行檢查。

HTML canvas translate() Method

GeeksforGeeks

style="border:2px solid gray">

var geeks = document.getElementById("GFG");

var contex = geeks.getContext("2d");

contex.translate(250, 110); //contex.translate(x, y);

contex.fillStyle = "#00FF00";

contex.fillRect(20, 20, 150, 100);

輸出：

范例2：

HTML canvas translate() Method

GeeksforGeeks

style="border:2px solid gray">

var geeks = document.getElementById("GFG");

var contex = geeks.getContext("2d");

contex.rect(00, 00, 150, 100);

contex.fillStyle = "green";

contex.fill();

contex.stroke();

contex.translate(250, 50);

contex.rect(100, 100, 150, 100);

contex.fillStyle = "";

contex.fill();

contex.stroke();

輸出：

注意：如果在translate()方法之后調用fillRect()方法，則該值將添加到x和y坐標值中。

支持的瀏覽器：

谷歌瀏覽器

Internet Explorer 9.0或以上

火狐瀏覽器

蘋果瀏覽器

Opera

總結

以上是生活随笔為你收集整理的HTML translate方法,HTML canvas translate()用法及代码示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。