HTML canvas drawImage() 方法
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() Metode ini juga dapat mengegam bagian gambar tertentu, serta/atau menambahkan atau mengurangi ukuran gambar.
Contoh
Contoh 1
Gambar yang digunakan:
Tampilkan gambar di atas kanvas:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
Petunjuk：Lebih banyak contoh disediakan di bawah halaman.
Syntax
Bentuk syntax JavaScript 1
Tentukan lokasi gambar di atas kanvas：
context.drawImage(img,x,y);
Bentuk syntax JavaScript 2
Tentukan lokasi gambar di atas kanvas dan tentukan lebar dan tinggi gambar：
context.drawImage(img,x,y,width,height);
Bentuk syntax JavaScript 3
Potong gambar dan tentukan lokasi bagian dipotong di atas kanvas：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| img | Tentukan gambar, kanvas, atau video yang digunakan. |
| sx | Pilihan. Posisi x awal pemotongan. |
| sy | Pilihan. Posisi y awal pemotongan. |
| swidth | Pilihan. Lebar gambar yang dipotong. |
| sheight | Pilihan. Tinggi gambar yang dipotong. |
| x | Posisi x koordinat gambar di atas kanvas. |
| y | Posisi y koordinat gambar di atas kanvas. |
| width | Pilihan. Lebar gambar yang digunakan. (Gelincir atau kecilkan gambar) |
| height | Pilihan. Tinggi gambar yang digunakan. (Gelincir atau kecilkan gambar) |
Lebih banyak contoh
Contoh 2
Tentukan lokasi gambar di atas kanvas dan tentukan lebar dan tinggi gambar：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Contoh 3
Potong gambar dan tentukan lokasi bagian dipotong di atas kanvas：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
Contoh 4
Video yang digunakan (tekan tombol play untuk memulai pertunjukan):
Kanvas：
JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()}}
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Pendukung Pelayar
Nombor dalam tabel menunjukkan versi paling awal pereka paling 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>.
