Metode HTML canvas scale()
Definisi dan penggunaan
scale() metode untuk mengukur skala peta gambar saat ini, lebih besar atau lebih kecil.
Keterangan:Jika Anda mengukur skala peta gambar, semua peta gambar setelahnya juga akan diukur skala. Posisi pula akan diukur skala. Jika Anda tulis scale(2,2), maka peta gambar akan berada di tempat yang jauh dua kali lipat dari pojok atas kiri kanvas.
Contoh
Contoh 1
Gambar persegi panjang, tingkatkan skala ke 200%, lalu gambar lagi persegi panjang:
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:Lebih banyak contoh disediakan di bawah halaman.
Sintaks
context.scale(scalewidth,scaleheight);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| scalewidth | Tingkatkan lebar peta gambar saat ini (1=100%, 0.5=50%, 2=200%, seperti ini). |
| scaleheight | Tingkatkan tinggi peta gambar saat ini (1=100%, 0.5=50%, 2=200%, dll). |
Beberapa contoh lain
Contoh 2
Gambar sebuah persegi panjang; perbesar 200%, gambar lagi persegi panjang; perbesar 200%, gambar lagi persegi panjang; perbesar 200%, gambar lagi persegi panjang:
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:Perhatian: Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
