Gambar untuk digunakan:
Contoh
Menggambar 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);
}; Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| drawImage() | iya nih | 9.0 | iya nih | iya nih | iya nih |
Definisi dan Penggunaan
The drawImage() metode menarik gambar, kanvas, atau video ke kanvas.
The drawImage() metode juga dapat menarik bagian dari suatu gambar, dan / atau peningkatan / mengurangi ukuran gambar.
 | Catatan: Anda tidak dapat memanggil drawImage() metode sebelum gambar telah dimuat. Untuk memastikan bahwa gambar telah dimuat, Anda dapat menghubungi drawImage() from window.onload() atau dari document.getElementById(" imageID ").onload . |
|---|
JavaScript Sintaks
Posisikan gambar di kanvas:
| sintaks JavaScript: | context.drawImage(img,x,y); |
|---|
Posisikan gambar di kanvas, dan menentukan lebar dan tinggi dari gambar:
| sintaks JavaScript: | context.drawImage(img,x,y,width,height); |
|---|
Klip gambar dan posisi bagian dijepit di kanvas:
| sintaks JavaScript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Nilai parameter
| Parameter | Deskripsi | Mainkan |
|---|---|---|
| img | Menentukan gambar, kanvas, atau elemen video menggunakan | |
| sx | Pilihan. Koordinat x di mana untuk memulai kliping | Mainkan " |
| sy | Pilihan. y koordinat di mana untuk memulai kliping | Mainkan " |
| swidth | Pilihan. Lebar gambar terpotong | Mainkan " |
| sheight | Pilihan. Ketinggian gambar terpotong | Mainkan " |
| x | Koordinat x di mana untuk menempatkan gambar pada kanvas | Mainkan " |
| y | y koordinat di mana untuk menempatkan gambar pada kanvas | Mainkan " |
| width | Pilihan. Lebar gambar menggunakan (stretch atau mengurangi gambar) | Mainkan " |
| height | Pilihan. Ketinggian gambar menggunakan (stretch atau mengurangi gambar) | Mainkan " |
Contoh lebih
Contoh
Posisikan gambar di kanvas, dan menentukan lebar dan tinggi dari 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);
}; Cobalah sendiri " Contoh
Klip gambar dan posisi bagian dijepit 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);
}; Cobalah sendiri " Contoh
Video untuk menggunakan (tekan Putar untuk memulai demonstrasi):
Kanvas:
JavaScript (kode menarik frame dari video 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); Cobalah sendiri "