创建并填充图案
首先看一下怎么加载图像：
创建Image对象
为Image对象指定图片源
代码如下：
- var img = new Image(); //创建Image对象
img.src = "8-1.jpg"; //为Image对象指定图片源
扩展：HTML中的相对路径
'./目录或文件名' 或者 '目录或文件名' 是指当前操作的文件所在目录的路径
'../目录或文件名' 是指当前所操作的文件所在目录的上一级目录的路径
之后填充纹理：
- var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;
我们直接看一段完整的程序，这里我要重复填充这个萌萌的长颈鹿作为纹理。需要注意的是，选择图片时一定要选择那种左右互通，上下互通的图片做为纹理，这样看上去才不会有不自然的短接处。
下面提供代码。
- <!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");
