그림을 그립니다
var image = new Image ();
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 (이미지, "반복");
Context.FillStyle = PAT;
context.fillRect (0,0,400,300);
이미지 자르기
길을 먼저 그립니다
context.clip ();
<html> <head> <meta charset = "utf-8"> <title> 그림 그리기 그림 </title> <meta name = "viewport"content = "width = device-width, minimum-scale = 1, maximum-scale = 1, user-calable = no"/> </head> <body> <canvas "> canvas"> type = "text/javaScript"> var ocanvas = document.getElementById ( "canvas"); var context = ocanvas.getContext ( "2d"); Context.fillStyle = "#ededed"; context.fillRect (0, 0, 500, 500); // 이미지를 그리십시오 var img = new Image (); // img.src = "img/01.jpg"를 작성합니다. // 이미지 주소 img.onload = function () {// 모든 이미지 정보로드 페이지 context.DrawImage (img, 0, 0); // IMG 객체; 0,0 : IMG 좌표 시작점}; </script> </body> </html>