Metode drawImage() kanvas HTML
Gambar yang akan digunakan:
Contoh
Gambarkan gambar ke kanvas:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
Method | |||||
---|---|---|---|---|---|
drawImage() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Metode drawImage() menggambar gambar, kanvas, atau video ke kanvas.
Metode drawImage() juga dapat menggambar bagian dari suatu gambar, dan/atau menambah/mengurangi ukuran gambar.
Catatan: Anda tidak dapat memanggil metode drawImage() sebelum gambar dimuat. Untuk memastikan bahwa gambar telah dimuat, Anda dapat memanggil drawImage() dari window.onload() atau dari document.getElementById(" imageID ").onload.
Sintaks JavaScript
Posisikan gambar di kanvas:
JavaScript syntax: | context.drawImage(img,x,y); |
---|
Posisikan gambar di kanvas, dan tentukan lebar dan tinggi gambar:
JavaScript syntax: | context.drawImage(img,x,y,width,height); |
---|
Klip gambar dan posisikan bagian yang terpotong di kanvas:
JavaScript syntax: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
---|
Nilai Parameter
Parameter | Description | Play it |
---|---|---|
img | Specifies the image, canvas, or video element to use | |
sx | Optional. The x coordinate where to start clipping | |
sy | Optional. The y coordinate where to start clipping | |
swidth | Optional. The width of the clipped image | |
sheight | Optional. The height of the clipped image | |
x | The x coordinate where to place the image on the canvas | |
y | The y coordinate where to place the image on the canvas | |
width | Optional. The width of the image to use (stretch or reduce the image) | |
height | Optional. The height of the image to use (stretch or reduce the image) |
Lebih Banyak Contoh
Contoh
Posisikan gambar di kanvas, dan tentukan lebar dan tinggi gambar:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
};
Contoh
Klip gambar dan posisikan bagian yang terpotong di kanvas:
JavaScript:
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
};
Contoh
Video yang akan digunakan (tekan Putar untuk memulai demonstrasi):
Kanvas:
JavaScript (kode menggambar bingkai video saat ini setiap 20 milidetik):
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Referensi Kanvas HTML