<!DOCTYPE HTML>
<html>
<head>
<title>createPatterns</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
//创建新的图像对象作为图案
var img = new Image();
img.src = "C:/Users/Administrator/Desktop/11.jpg";
img.onload = function(){
//创建图案
var ptrn = cxt.createPattern(img,'repeat');
cxt.fillStyle = ptrn;
cxt.fillRect(0,0,460,478);
}
}
</script>
</head>
<body onLoad="draw()" style="text-align:center;">
<canvas id="myCanvas" width="460" height="478" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
【图案 Patterns 方法。createPattern(image,type) 该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。注意:与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。实例中创建一个图案然后赋给了 fillStyle 属性。值得一提的是，使用 Image 对象的 onload handler 来确保设置图案之前图像已经装载完毕。】