[HTML drawImage createpattern] Canvas drawing picture DrawImage property picture Tiling Way Instance Demo

<! DOCTYPE html>html,body {margin:0; padding:0;} HTML {background: #999; height:100%;} #can {background: #FFF; display:block; margin:75px auto; Border-radius:2px;}</style><script type= ' Text/javascript ' >    $( function(){        varCanvas = $ (' #can '). Get (0 ); varOcan = Canvas.getcontext (' 2d ' ); varIMG =NewImage ();/*new Picture Object*/img.src= './images/bg.jpg '; Img.onload= CREATEBG;/*picture Pre-loading technology*/        functionCreatebg () {varBG = Ocan.createpattern (img, ' repeat ');/*How the picture is tiled repeat repeat-x repeat-y no-repeat*/Ocan.fillstyle= BG;/*Note: FillStyle Fill style This property not only can set the color but also can set the background picture*/Ocan.fillrect (250-99, 250-127, Canvas.width, canvas.height); }    } );</script>
[HTML drawImage createpattern] Canvas drawing picture DrawImage property picture Tiling Way Instance Demo