ผ้าใบ HTML drawImage () วิธีการ
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
หากต้องการใช้ภาพ:
ตัวอย่าง
การวาดภาพบนผ้าใบนี้:
javascript:
var ctx = c.getContext ( "2D");
var img = document.getElementById ( "กรีดร้อง");
img.onload = function () {
ctx.drawImage (img, 10,10);
}
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุน drawImage () วิธีการ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
drawImage () วิธีการวาดภาพวิดีโอหรือผ้าใบบนผืนผ้าใบ
ส่วนบางอย่างที่จะ drawImage () วิธีการยังสามารถวาดภาพและ / หรือเพิ่มหรือลดขนาดของภาพ
ไวยากรณ์ JavaScript
การวางตำแหน่งภาพบนผืนผ้าใบ:
| ไวยากรณ์ javascript: | บริบท .drawImage (img, x, y); |
|---|
การวางตำแหน่งภาพบนผืนผ้าใบและความกว้างที่กำหนดไว้และความสูงของภาพ:
| ไวยากรณ์ javascript: | บริบท .drawImage (img, X, Y, ความกว้างความสูง); |
|---|
ตัดภาพและการ จำกัด การตัดส่วนบนผ้าใบ:
| ไวยากรณ์ javascript: | บริบท .drawImage (img, SX, SY, swidth, sheight, X, Y, ความกว้างความสูง); |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | |
|---|---|---|
| img | ที่กำหนดไว้ภาพบนผืนผ้าใบหรือวิดีโอที่คุณต้องการใช้ | |
| SX | ไม่จำเป็น เริ่มตัด x พิกัดของตำแหน่ง | |
| SY | ไม่จำเป็น เริ่มตัด y พิกัด | |
| swidth | ไม่จำเป็น มันเป็นความกว้างของภาพตัด | |
| sheight | ไม่จำเป็น ภาพตัดสูง | |
| x | สถานที่พิกัด x ตำแหน่งของภาพบนผืนผ้าใบ | |
| Y | วาง y พิกัดตำแหน่งของภาพบนผืนผ้าใบ | |
| ความกว้าง | ไม่จำเป็น ที่จะใช้ความกว้างของภาพ (โดยการยืดหรือการหดตัวภาพ) | |
| ความสูง | ไม่จำเป็น ความสูงของภาพที่คุณต้องการใช้ (โดยการยืดหรือการหดตัวภาพ) |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
บนผืนผ้าใบวางตำแหน่งภาพแล้วระบุความกว้างและความสูงของภาพ:
javascript:
var ctx = c.getContext ( "2D");
var img = document.getElementById ( "กรีดร้อง");
img.onload = function () {
ctx.drawImage (img, 10,10,150,180);
}
ลอง»
ตัวอย่าง
ตัดภาพและบนผืนผ้าใบของส่วนตัดที่อยู่ในตำแหน่งที่:
javascript:
var ctx = c.getContext ( "2D");
var img = document.getElementById ( "กรีดร้อง");
ctx.drawImage (img, 90,130,50,60,10,10,50,60);
ลอง»
ตัวอย่าง
วิดีโอที่คุณต้องการใช้ (กดปุ่มเล่นเพื่อเริ่มต้นการสาธิต):
ผ้าใบ:
JavaScript (ทุก 20 มิลลิวินาทีรหัสจะวาดกรอบปัจจุบันของวิดีโอ):
var c = document.getElementById ( "myCanvas");
ctx = c.getContext (2D ');
v.addEventListener ( 'เล่น' ฟังก์ชั่น () {var i = window.setInterval (ฟังก์ชั่น () {ctx.drawImage (V, 5,5,260,125)}, 20);} เท็จ);
v.addEventListener ( 'หยุด' ฟังก์ชั่น () {window.clearInterval (i);} เท็จ);
v.addEventListener ( 'จบ' ฟังก์ชั่น () {clearInterval (i);} เท็จ);
ลอง»
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง