createPattern()简介
纹理其实就是图案的重复，填充图案通过createPattern()函数进行初始化。它需要传进两个参数createPattern(img,repeat-style)，第一个是Image对象实例，第二个参数是String类型，表示在形状中如何显示repeat图案。可以使用这个函数加载图像或者整个画布作为形状的填充图案。
有以下4种图像填充类型：

1.平面上重复：repeat;
2.x轴上重复：repeat-x;
3.y轴上重复：repeat-y;
4.不使用重复：no-repeat;

其实createPattern()的第一个参数还可以传入一个canvas对象或者video对象，这里我们只讲解Image对象，其余的大家自己尝试。

创建并填充图案
首先看一下怎么加载图像：

创建Image对象
为Image对象指定图片源

代码如下：

JavaScript Code复制内容到剪贴板

扩展：HTML中的相对路径
'./目录或文件名' 或者 '目录或文件名' 是指当前操作的文件所在目录的路径
'../目录或文件名' 是指当前所操作的文件所在目录的上一级目录的路径

之后填充纹理：

JavaScript Code复制内容到剪贴板

context.fillStyle = pattern;  

我们直接看一段完整的程序，这里我要重复填充这个萌萌的长颈鹿作为纹理。需要注意的是，选择图片时一定要选择那种左右互通，上下互通的图片做为纹理，这样看上去才不会有不自然的短接处。

下面提供代码。

JavaScript Code复制内容到剪贴板

运行结果：

这里使用了Image的onload事件，它的作用是对图片进行预加载处理，即在图片加载完成后才立即除非其后function的代码体。这个是必须的，如果不写的话，画布将会显示黑屏。因为没有等待图片加载完成就填充纹理，导致浏览器找不到图片。
这里使用了"repeat"，童鞋们也可尝试使用一下其他三个值，看看会有什么不同的效果。也可以自己找一下其他的图片尝试填充，看看效果。

相关阅读:
Java的Hibernate框架中复合主键映射的创建和使用教程
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
js和jquery使按钮失效为不可用状态的方法
Win 8将IE浏览器的HTML编辑器设置为记事本的方法
C#实现最简单的文本加密方法
Javascript中的作用域和上下文深入理解
ubuntu14.10升级ubuntu15.04的详细教程
jquery实现个人中心导航菜单效果和美观都非常不错
MySQL索引之聚集索引介绍
基于CSS3特效之动画:animation的应用
解析oracle对select加锁的方法以及锁的查询
PHP获取和操作配置文件php.ini的几个函数介绍
分享几个提高Java性能的高效用法
详解C#编程中一维数组与多维数组的使用