写真を描きます
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（image、 "Repeat"）;
context.fillstyle = pat;
Context.FillRect（0,0,400,300）;
画像トリミング
最初にパスを描きます
context.clip（）;
<html> <head> <メタcharset = "utf-8"> <title>描画写真</title> <meta name = "viewport" content = "width =" width = "width =" width、最小スケール= 1、最大スケール= 1、ユーザースケーラブル= no "/>> </head> 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（）{//すべての画像情報の読み込みページコンテキストを検出します。drawimage（img、0、0）; // IMGオブジェクト; 0,0：IMG座標開始点}; </script> </body> </html>