ภาพที่จะใช้:
ตัวอย่าง
วาดภาพลงบนผืนผ้าใบ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
drawImage() วิธีการวาดภาพบนผืนผ้าใบหรือวิดีโอบนผืนผ้าใบ
drawImage() วิธีการยังสามารถวาดชิ้นส่วนของภาพและ / หรือการเพิ่มขึ้น / ลดขนาดภาพ
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 | ไม่จำเป็น. ความกว้างของภาพที่จะใช้ (stretch or reduce the image) | เล่น " |
| height | ไม่จำเป็น. ความสูงของภาพที่จะใช้ (stretch or reduce the image) | เล่น " |
ตัวอย่างอื่น ๆ
ตัวอย่าง
วางตำแหน่งภาพบนผืนผ้าใบและระบุความกว้างและความสูงของภาพ:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180); ลองตัวเอง» ตัวอย่าง
คลิปภาพและตำแหน่งส่วนที่ตัดบนผืนผ้าใบ:
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); ลองตัวเอง» ตัวอย่าง
วิดีโอที่จะใช้ (press Play to start the demonstration) :
ผ้าใบ:
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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); ลองตัวเอง» <ผ้าใบวัตถุ