Skala kanvas HTML () Metode
Contoh
Gambar persegi panjang, skalakan hingga 200%, lalu gambar persegi panjang 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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| scale() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Metode scale() menskalakan gambar saat ini, lebih besar atau lebih kecil.
Catatan: Jika Anda menskalakan gambar, semua gambar di masa mendatang juga akan diskalakan. Penentuan posisi juga akan diskalakan. Jika Anda menskalakan(2,2); gambar akan diposisikan dua kali lebih jauh dari kiri dan atas kanvas seperti yang Anda tentukan.
| Sintaks JavaScript: | konteks .skala( lebar skala, tinggi skala ); |
|---|
Nilai Parameter
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) |
Lebih Banyak Contoh
Contoh
Gambar persegi panjang, skalakan hingga 200%, gambar persegi panjang lagi, skala hingga 200%, gambar persegi panjang lagi, skala hingga 200%, gambar persegi panjang 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);
Referensi Kanvas HTML