วาดภาพ
ภาพ var = ภาพใหม่ ();
image.src =” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4mtau.thumb.700_0.jpeg”;
image.onload = function () {}
Context.DrawImage (Image, X, Y);
Context.DrawImage (Image, X, Y, W, H);
Context.Drawiamge (Image, SX, SY, SW, SH, DX, DY, DW, DH);
การปูกระเบื้องรูปภาพ
var pat = context.createPattern (รูปภาพ, "ทำซ้ำ");
บริบท fillstyle = pat;
Context.fillrect (0,0,400,300);
การปลูกถ่ายภาพ
วาดเส้นทางก่อน
context.clip ();
<html> <head> <meta charset = "utf-8"> <title> วาดรูปภาพ </title> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, ระดับต่ำสุด = 1, canvas-scale = 1 type = "text/javascript"> var ocanvas = document.getElementById ("canvas"); var context = ocanvas.getContext ("2d"); Context.fillstyle = "#ededed"; Context.fillrect (0, 0, 500, 500); // วาดภาพ var img = ภาพใหม่ (); // สร้าง img.src = "img/01.jpg"; // ที่อยู่รูปภาพ img.onload = function () {// ตรวจจับการโหลดข้อมูลภาพทั้งหมดบริบทการโหลดหน้า (img, 0, 0); // img object; 0,0: จุดเริ่มต้นพิกัด IMG}; </script> </body> </html>