Ch8 填充样式

有以下4种图像填充类型：

• x轴上重复：repeat-x;
• y轴上重复：repeat-y;

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

创建并填充图案

首先看一下怎么加载图像：

1. 创建Image对象
2. 为Image对象指定图片源

代码如下：

之后填充纹理：

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

安利一个网站。这张图取自，这个网站非常赞，里面的图片非常漂亮而且种类繁多，最重要的是它是免费的！！！我从初中开始就一直使用这个网站来找素材。并且最近又推出了APP，有Android和iOS端，推荐大家下载使用。（这是个秘密，我一般不告诉别人的。）

演示 8-1

运行结果：

这里使用了Image的事件，它的作用是对图片进行预加载处理，即在图片加载完成后才立即除非其后function的代码体。这个是必须的，如果不写的话，画布将会显示黑屏。因为没有等待图片加载完成就填充纹理，导致浏览器找不到图片。

这里使用了”repeat”，童鞋们也可尝试使用一下其他三个值，看看会有什么不同的效果。也可以自己找一下其他的图片尝试填充，看看效果。