Metode scale() Canvas
Definisi dan penggunaan
scale() Metode untuk menggeser pengerian saat ini, lebih besar atau lebih kecil.
Keterangan:Jika Anda mengbesarkan pengerian, semua pengerian setelahnya juga akan dibesarkan. Lokasi pengerian juga akan dibesarkan. Jika Anda menulis scale(2,2)Jika pengaturan diubah, pengerian akan berada di posisi dua kali jarak dari kiri atas kanvas.
Contoh
Contoh 1
Gambar lingkaran, besarkan ke 200%, lalu gambar lingkaran lagi:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Petunjuk:Beberapa contoh lainnya tersedia di bagian bawah halaman.
Sintaks
context.scale(scalewidth,scaleheight);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| scalewidth | Besarkan lebar pengerian saat ini (1=100%, 0.5=50%, 2=200%, dsb). |
| scaleheight | Besarkan tinggi pengerian saat ini (1=100%, 0.5=50%, 2=200%, dll). |
Beberapa contoh lainnya
Contoh 2
Gambar sebuah lingkaran; Besarkan ke 200%, lalu gambar lingkaran lagi; Besarkan ke 200%, lalu gambar lingkaran lagi; Besarkan ke 200%, lalu gambar lingkaran lagi:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
