tutorial pengembangan web terbaru
 

HTML canvas translate() Method

<Canvas Object

Contoh

Menggambar persegi panjang di posisi (10,10) , mengatur baru (0,0) posisi untuk (70,70) . Menggambar persegi panjang yang sama lagi (notice that the rectangle now starts in position (80,80) :

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Cobalah sendiri "

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
translate() 4.0 9.0 3.6 4.0 10.1

Definisi dan Penggunaan

The translate() metode remaps (0,0) posisi di kanvas.

Note: Ketika Anda memanggil metode seperti fillRect() setelah translate() , nilai ditambahkan ke x- dan y-nilai koordinat.

Ilustrasi <span class = menerjemahkan () metode "/>

sintaks JavaScript: context . translate( x,y ) ;

Nilai parameter

Note: Anda dapat menentukan salah satu atau kedua parameter.

Parameter Deskripsi Mainkan
x Nilai untuk menambah horisontal (x) koordinat Mainkan "
y Nilai untuk menambah vertikal (y) koordinat Mainkan "

<Canvas Object