Metode terjemahan kanvas HTML ()
Contoh
Gambarlah sebuah persegi panjang pada posisi (10,10), atur posisi baru (0,0) ke (70,70). Gambar persegi panjang yang sama lagi (perhatikan bahwa persegi panjang sekarang dimulai pada posisi (80,80):
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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Metode translate() memetakan kembali posisi (0,0) di kanvas.
Catatan: Saat Anda memanggil metode seperti fillRect() setelah translate(), nilai ditambahkan ke nilai koordinat x dan y.
| Sintaks JavaScript: | konteks .translate( x,y ); |
|---|
Nilai Parameter
Catatan: Anda dapat menentukan satu atau kedua parameter.
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
Referensi Kanvas HTML