你的位置:首页 > 网页设计

[网页设计]html5 canvas用图案填充形状


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>用图案填充形状</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){  canvasApp();}function canvasSupport(){  return Modernizr.canvas;}function canvasApp(){  if(!canvasSupport()){    return;  }else{    var theCanvas = document.getElementById('canvas')    var context = theCanvas.getContext("2d")  }  drawScreen();  function drawScreen(){    var fillImg=new Image();    fillImg.src='fill_20x20.png';    fillImg.onload=function(){

//简单的onload
//图片填充的4种类型:repeat,no-repeat,repeat-x,repeat-y;
//createPattern()填充图像函数,一个图像的实例,一个填充的类型
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(0,0,100,20); context.fillStyle=fillPattern1; context.fillRect(0,10,100,20); context.fillStyle=fillPattern2; context.fillRect(0,60,100,10); } } }</script><canvas id="canvas" width="500" height="500">你的浏览器无法使用canvas如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!</canvas></body></html>

注意图片的路径!!!其他就和css的background感觉差不多

//图片填充的4种类型:repeat,no-repeat,repeat-x,repeat-y;
//createPattern()填充图像函数,一个图像的实例,一个填充的类型