写真を描きます
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>