<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Fill shapes with patterns</title><Scriptsrc= "Js/modernizr.js"></Script></Head><Body><Scripttype= "Text/javascript">Window.addeventlistener ('Load', eventwindowloaded,false);functioneventwindowloaded () {Canvasapp ();}functionCanvassupport () {returnModernizr.canvas;}functionCanvasapp () {if(!Canvassupport ()) { return; }Else{ varThecanvas=document.getElementById ('Canvas') varContext=Thecanvas.getcontext ("2d")} drawscreen (); functionDrawscreen () {varfillimg=NewImage (); FILLIMG.SRC='Fill_20x20.png'; Fillimg.onload=function(){
The simple onload
4 Types of picture fills: repeat,no-repeat,repeat-x,repeat-y;
Createpattern () Fill image function, an instance of an image, a type of fill
varFillPattern=Context.createpattern (fillimg,'Repeat-x'); varfillPattern1=Context.createpattern (fillimg,'repeat-y'); varfillPattern2=Context.createpattern (fillimg,'Repeat'); Context.fillstyle=FillPattern; Context.fillrect (0,0, -, -); Context.fillstyle=fillPattern1; Context.fillrect (0,Ten, -, -); Context.fillstyle=fillPattern2; Context.fillrect (0, -, -,Ten); } } }</Script><CanvasID= "Canvas"width= "$"Height= "$">your browser is unable to use canvas if in doubt add qq:1035417613; small white children's shoes; Your support is my greatest happiness!! </Canvas></Body></HTML>
Note the path of the picture!!! The rest is just like the background of CSS.
4 Types of picture fills: repeat,no-repeat,repeat-x,repeat-y;
Createpattern () Fill image function, an instance of an image, a type of fill
HTML5 canvas fill shape with pattern