HTML canvas drawImage() วิธี

คู่มือ HTML5 Canvas

การระบุและการใช้งาน

drawImage() วิธีในการวาดภาพบนกระดานวาด HTML canvas drawImage()

drawImage() วิธีนี้ยังสามารถวาดส่วนบางส่วนของภาพ และ/หรือเพิ่มหรือลดขนาดของภาพได้เช่นกัน

ตัวอย่าง

ตัวอย่าง 1

ภาพที่จะใช้งาน:

tulip

วาดภาพบนกราฟฟิก:

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

ลองทดสอบด้วยตัวเอง

คำเตือน:หน้าล่างมีตัวอย่างเพิ่มเติม

สัญลักษณ์

สัญลักษณ์ภาษา JavaScript 1

กำหนดตำแหน่งภาพบนกราฟฟิก:

context.drawImage(img,x,y);

สัญลักษณ์ภาษา JavaScript 2

กำหนดตำแหน่งภาพบนกราฟฟิกและกำหนดความกว้างและความสูงของภาพ:

context.drawImage(img,x,y,width,height);

สัญลักษณ์ภาษา JavaScript 3

ตัดภาพและกำหนดตำแหน่งส่วนที่ตัดของภาพบนกราฟฟิก:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

ค่าตัวแปร

ตัวแปร รายละเอียด
img กำหนดภาพที่จะใช้งาน หรือกราฟฟิกหรือวิดีโอ
sx ที่เลือก (ตำแหน่ง x ที่เริ่มตัด)
sy ที่เลือก (ตำแหน่ง y ที่เริ่มตัด)
swidth ที่เลือก (ความกว้างของภาพที่ตัด)
sheight ที่เลือก (ความสูงของภาพที่ตัด)
x ตำแหน่ง x ของภาพบนกราฟฟิก
y ตำแหน่ง y ของภาพบนกราฟฟิก
width ที่เลือก (ความกว้างของภาพที่จะใช้งาน): (ขยายหรือลดภาพ)
height ที่เลือก (ความสูงของภาพที่จะใช้งาน): (ขยายหรือลดภาพ)

หน้าต่างอื่น

ตัวอย่าง 2

กำหนดตำแหน่งภาพบนกราฟฟิกและกำหนดความกว้างและความสูงของภาพ:

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 3

ตัดภาพและกำหนดตำแหน่งส่วนที่ตัดของภาพบนกราฟฟิก:

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 4

วิดีโอที่จะใช้งาน (กดปุ่มเล่นเพื่อเริ่มแสดง):

คราบวาด:

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas.

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,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

ลองทดสอบด้วยตัวเอง

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางนี้บอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ：Internet Explorer 8 และรุ่นเก่าของมันไม่สนับสนุนสิ่งที่กล่าวว่า <canvas> อิเล็กทรอนิกส์

คู่มือ HTML5 Canvas