Kaedah HTML canvas translate()

Definisi dan penggunaan

translate() mengalihkan lokasi (0,0) di atas kanvas.

注释:Apabila anda panggil kaedah seperti fillRect() pada masa penggunaan kaedah seperti x dan y nilai koordinat.

Diagram untuk Methode translate()

Contoh

Di tempat (10,10) lukis sejajar, tetapkan lokasi baru (0,0) ke (70,70). Lukis kembali sejajar baru (perhatikan bahawa sejajar saat ini bermula dari lokasi (80,80)):

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

亲自试一试

语法

context.translate(x,y);

参数值

参数 描述
x 添加到水平坐标(x)上的值。
y 添加到垂直坐标(y)上的值。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。