ภาพที่จะใช้:
ตัวอย่าง
วาดภาพลงบนผืนผ้าใบ:
javascript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| drawImage() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
drawImage() วิธีการวาดภาพบนผืนผ้าใบหรือวิดีโอบนผืนผ้าใบ
drawImage() วิธีการยังสามารถวาดชิ้นส่วนของภาพและ / หรือการเพิ่มขึ้น / ลดขนาดภาพ
 | หมายเหตุ: คุณไม่สามารถเรียก drawImage() วิธีการก่อนที่ภาพจะมีการโหลด เพื่อให้แน่ใจว่าภาพที่ได้รับการโหลดคุณสามารถเรียก drawImage() from window.onload() หรือจาก document.getElementById(" imageID ").onload |
|---|
JavaScript ไวยากรณ์
วางตำแหน่งภาพบนผืนผ้าใบ:
| ไวยากรณ์ javascript: | context.drawImage(img,x,y); |
|---|
วางตำแหน่งภาพบนผืนผ้าใบและระบุความกว้างและความสูงของภาพ:
| ไวยากรณ์ javascript: | context.drawImage(img,x,y,width,height); |
|---|
คลิปภาพและตำแหน่งส่วนที่ตัดบนผืนผ้าใบ:
| ไวยากรณ์ javascript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| img | ระบุภาพบนผืนผ้าใบหรือองค์ประกอบวิดีโอที่จะใช้ | |
| sx | ไม่จำเป็น พิกัด x ที่จะเริ่มต้นการตัด | เล่น " |
| sy | ไม่จำเป็น พิกัด y ที่จะเริ่มต้นการตัด | เล่น " |
| swidth | ไม่จำเป็น ความกว้างของภาพที่ถูกตัด | เล่น " |
| sheight | ไม่จำเป็น ความสูงของภาพที่ถูกตัด | เล่น " |
| x | พิกัด x ที่จะวางภาพบนผืนผ้าใบ | เล่น " |
| y | พิกัด y ที่จะวางภาพบนผืนผ้าใบ | เล่น " |
| width | ไม่จำเป็น ความกว้างของภาพที่จะใช้ (ยืดหรือลดภาพ) | เล่น " |
| height | ไม่จำเป็น ความสูงของภาพที่จะใช้ (ยืดหรือลดภาพ) | เล่น " |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วางตำแหน่งภาพบนผืนผ้าใบและระบุความกว้างและความสูงของภาพ:
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);
}; ลองตัวเอง» ตัวอย่าง
คลิปภาพและตำแหน่งส่วนที่ตัดบนผืนผ้าใบ:
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);
}; ลองตัวเอง» ตัวอย่าง
วิดีโอที่จะใช้ (กดปุ่ม Play เพื่อเริ่มต้นการสาธิต):
ผ้าใบ:
JavaScript (รหัสดึงเฟรมปัจจุบันของวิดีโอทุก 20 มิลลิวินาที):
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); ลองตัวเอง»