Detailed explanation of image drawing examples in HTML5 canvas 9

Draw an image

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);

Picture tiling

Var pat= context.createPattern(image,”repeat”);

Context.fillStyle=pat;

Context.fillRect(0 ,0,400,300);

Picture cropping

Draw the path first

Context.clip();

For more detailed explanations of HTML5 canvas 9 picture drawing examples and related articles, please pay attention to the PHP Chinese website!