如果我们要在Canvas中只用个方块做出这样的效果 ：
开始
首先我们先创建一个画布，大小自定
<body>
<canvas id="canvas" height="2000" width="2000"style=back"background-color:white;border:3px solid red;"></canvas>
<body>
我这里的长宽为2000*2000，背景颜色为白色，边框是3px的红色直线。
接着我们制作一个用来平铺的图像，我制作的图像是一个110110的粉红色的方形，其中外边框10px为透明区域，方形实际可见面积为100100。
画布做好后我们开始写JS的部分：
function draw() {
var canvas = document.getElementById("canvas");
if (canvas == null) return false;
var tile = canvas.getContext("2d");
var img = new Image();
img.src = "YourImage.png";
img.onload = function () {
var pattern = tile.createPattern(img, "repeat");
tile.fillStyle = pattern;
tile.fillRect(0, 0, 2000, 2000);
};
}
写好JS部分后我们要把加载放到 <body> 中
<body onload="draw('canvas')">
<canvas id="canvas" height="2000" width="2000"style=back"background-color:white;border:3px solid red;"></canvas>
</body>
全部完成后我们生成制作出的网页看看效果
