Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

HTML5 canvas วาดรูปภาพบนรูปหลายเหลี่ยม (polygon) ได้ไหม?

ได้, ทำได้ สร้าง pattern จากรูปภาพ แล้วตั้ง pattern ให้เป็น fillStyle

ที่นี่ obj คือ image object ของเรา:

var context = canvas.getContext("2d");
var pattern = context.createPattern(obj, "repeat");
context.fillStyle = pattern;

คุณต้องปรับภาพให้เข้ากับ polygon เพื่อ:

context.save();
context.setTransform(m11, m12, m21, m22, dx, dy);
context.drawImage(obj);
context.restore();