Html5 canvas with pattern filling shape, html5canvas

Html5 canvas with pattern filling shape, html5canvas

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
// Simple onload
// Four types of image filling: repeat, no-repeat, repeat-x, repeat-y;
// CreatePattern () Filling image function, an image instance and a filling type
Var fillPattern = context. createPattern (fillImg, 'Repeat-x'); var fillPattern1 = context. createPattern (fillImg, 'Repeat-y'); var fillPattern2 = context. createPattern (fillImg, 'repeat'); context. fillStyle = fillPattern; context. fillRect (,); context. fillStyle = fillPattern1; context. fillRect (,); context. fillStyle = fillPattern2; context. fillRect (,) ;}}</script> <canvas id = "canva S "width =" 500 "height =" 500 "> you cannot use canvas in your browser. If you have any questions, add QQ: 1035417613; Xiaobai kids shoes. Your support is my greatest pleasure !! </Canvas> </body> 
Note the image path !!! The rest is similar to the css background.

// Four types of image filling: repeat, no-repeat, repeat-x, repeat-y;
// CreatePattern () Filling image function, an image instance and a filling type