Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

จะคัดลอกเนื้อหาของ HTML5 Canvas หนึ่งไปยัง Canvas อื่นในเครื่องได้อย่างไร


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

ตัวอย่าง

เรามาดูตัวอย่างกัน −

//context grabbed from your destination canvas
ctx = destinationCanvas.getContext('2d');

//drawImage() called passing the source canvas directly
dCtx.drawImage(sourceCanvas, 0, 0);

ในโค้ดนี้ ขั้นแรก รูปภาพจะถูกคัดลอกจากผ้าใบต้นทาง sourceCanvas สามารถเป็น HTMLImageElement, HTMLVideoElement หรือ HTMLCanvasElement ไม่สามารถใช้บริบทการวาดภาพแคนวาสเป็นแหล่งที่มาได้ หากบริบทการวาดแคนวาสเป็นแคนวาสต้นทางของคุณ แสดงว่ามีการอ้างอิงไปยังองค์ประกอบแคนวาสดั้งเดิมในบริบทภายใต้บริบท.canvas

โค้ดหลังใช้เมธอด drawImage() เพื่อคัดลอกบริบทจากแคนวาสต้นทางไปยังแคนวาสที่ต้องการ