Gambar untuk digunakan:
Contoh
Menggambar gambar ke kanvas:
JavaScript:
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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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.
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 untuk menggunakan (stretch or reduce the image) | Mainkan " |
| height | Pilihan. Ketinggian gambar untuk menggunakan (stretch or reduce the image) | Mainkan " |
Contoh lebih
Contoh
Posisikan gambar di kanvas, dan menentukan lebar dan tinggi dari gambar:
JavaScript:
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:
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 (press Play to start the demonstration) :
Kanvas:
JavaScript (kode menarik frame dari video setiap 20 milidetik):
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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Cobalah sendiri " <Canvas Object