HTML translate方法,HTML canvas translate()用法及代码示例

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