createPattern()简介
纹理其实就是图案的重复，填充图案通过createPattern()函数进行初始化。它需要传进两个参数createPattern(img,repeat-style)，第一个是Image对象实例，第二个参数是String类型，表示在形状中如何显示repeat图案。可以使用这个函数加载图像或者整个画布作为形状的填充图案。
有以下4种图像填充类型：
- 平面上重复：repeat;
- x轴上重复：repeat-x;
- y轴上重复：repeat-y;
- 不使用重复：no-repeat;
其实createPattern()的第一个参数还可以传入一个canvas对象或者video对象，这里我们只讲解Image对象，其余的大家自己尝试。
创建并填充图案
首先看一下怎么加载图像：
- 创建Image对象
- 为Image对象指定图片源
代码如下：
var img = new Image(); //创建Image对象
img.src = "8-1.jpg"; //为Image对象指定图片源
扩展：HTML中的相对路径
'./目录或文件名' 或者 '目录或文件名' 是指当前操作的文件所在目录的路径
'../目录或文件名' 是指当前所操作的文件所在目录的上一级目录的路径
之后填充纹理：
var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;
我们直接看一段完整的程序，这里我要重复填充这个萌萌的长颈鹿作为纹理。需要注意的是，选择图片时一定要选择那种左右互通，上下互通的图片做为纹理，这样看上去才不会有不自然的短接处。
萌萌的长颈鹿
安利一个网站。这张图取自优美图网，这个网站非常赞，里面的图片非常漂亮而且种类繁多，最重要的是它是免费的！！！我从初中开始就一直使用这个网站来找素材。并且最近又推出了APP，有Android和iOS端，推荐大家下载使用。（这是个秘密，我一般不告诉别人的。）
下面提供代码。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>填充纹理</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
var img = new Image();
img.src = "8-1.jpg";
img.onload = function(){
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(0,0,800,600);
}
}
</script>
</body>
</html>
运行结果：
很多个萌萌的长颈鹿
这里使用了Image的onload事件，它的作用是对图片进行预加载处理，即在图片加载完成后才立即除非其后function的代码体。这个是必须的，如果不写的话，画布将会显示黑屏。因为没有等待图片加载完成就填充纹理，导致浏览器找不到图片。
这里使用了"repeat"，童鞋们也可尝试使用一下其他三个值，看看会有什么不同的效果。也可以自己找一下其他的图片尝试填充，看看效果。
还有，长颈鹿是不是特别萌？看来我们已经是个艺术家了呢！这节内容很少，我们继续前进！😋
如果您喜欢本书，请使用支付宝扫描下面的二维码捐助作者。
二维码
谢谢您的支持！也欢迎您订阅本书。
如果书中有疏漏或错误之处，敬请您指出，期待您的pull request。如果有任何疑问也可以发送issue。
本人邮箱：airing@ursb.me
本人博客：http://ursb.me
本书地址：http://airingursb.gitbooks.io/canvas
本书github：http://github.com/airingursb/canvas
Canvas--Draw on the Web
网友评论