Metode scale() HTML canvas
Definisi dan penggunaan
scale() Metode untuk mengukur lukisan semasa, lebih besar atau lebih kecil.
Keterangan:Jika anda mengukur lukisan, semua lukisan setelahnya juga akan diukur. Lokasi juga akan diukur. Jika anda tulis scale(2,2)Jika sedemikian, lukisan akan berada di tempat yang jauh 2 kali dari kiri atas kanvas.
Contoh
Contoh 1
Lukis persegi, tumbuh kepada 200%, dan lukis lagi persegi:
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);
Pengumuman:Lebih banyak contoh disediakan di bawah bahagian halaman bawah.
Sintaks
context.scale(scalewidth,scaleheight);
Nilai parameter
| Parameter | Penerangan |
|---|---|
| scalewidth | Skaletkan lebar lukisan semasa (1=100%, 0.5=50%, 2=200%, dan lain-lain). |
| scaleheight | Skaletkan tinggi lukisan semasa (1=100%, 0.5=50%, 2=200%, dan lain-lain). |
Banyak Contoh Lainnya
Contoh 2
Garis gambar satu persegi; Besarkan 200%, garis gambar lagi persegi; Besarkan 200%, kemudian garis gambar lagi persegi; Besarkan 200%, garis gambar lagi persegi:
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 Peramban
Angka di tabel menandakan versi pertama browser yang mendukung sifat 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>.
