我这一章最后的示例是弄一个小画廊。画廊由挂着几张画作的格子组成。当页面装载好之后，为每张画创建一个 canvas 元素并用加上画框然后插入到画廊中去。在我这个例子里面，所有“画”都是固定宽高的，画框也是。你可以做些改进，通过脚本用画的宽高来准确控制围绕它的画框的大小。下面的代码应该是蛮自我解释的了。就是遍历图像对象数组，依次创建新的 canvas 元素并添加进去。可能唯一需要注意的，对于那些并不熟悉 DOM 的朋友来说，是 insertBefore 方法的用法。insertBefore是父节点（单元格）的方法，用于将新节点（canvas 元素）插入到我们想要插入的节点之前

function draw() { // Loop through all images for (i=0;i<document.images.length;i++){ // Don't add a canvas for the frame image if (document.images[i].getAttribute('id')!='frame'){ // Create canvas element canvas = document.createElement('CANVAS'); canvas.setAttribute('width',132); canvas.setAttribute('height',150); // Insert before the image document.images[i].parentNode.insertBefore(canvas,document.images[i]); ctx = canvas.getContext('2d'); // Draw image to canvas ctx.drawImage(document.images[i],15,20); // Add frame ctx.drawImage(document.getElementById('frame'),0,0); } } }

以上就是canvas游戏开发学习之四：应用图像的内容，更多相关内容请关注PHP中文网（）！

网格 the grid

在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的 HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和 距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。

绘制图形 drawing shapes

canvas 只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。

矩形 rectangles

我们首先看看矩形吧，有三个函数用于绘制矩形的：

fillRect(x,y,width,height) : Draws a filled rectangle strokeRect(x,y,width,height) : Draws a rectangular outline clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

它们都接受四个参数，x和y 指定矩形左上角(相对于原点)的位置，width和height是矩形的宽和高。好，实战一下吧。

绘制矩形的例子 Rectangular shape example

function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }

出来的结果应该和下边的是一样的。fillRect
函数画了一个大的黑色矩形（100x100），clearRect
函数清空了中间 60x60 大小的方块，然后strokeRect
函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里，我们会看到和clearRect
函数差不多另外两个方法，以及如何去改变图形的填充和边框颜色。

绘制路径 drawing paths

不像画矩形那样的直截了当，绘制路径是需要一些额外的步骤的。

beginPath() closePath() stroke() fill()

第一步是用beginPath
创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用beginPath
，子路径组都会被重置，然后可以绘制新的图形。

第二步就是实际绘制路径的部分，很快我们就会看到。

第三步是调用closePath
方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。

最后一步是调用stroke或fill 方法，这时，图形才是实际的绘制到 canvas上去。stroke是绘制图形的边框，fill会用填充出一个实心图形。

注意：当调用fill时，开放的路径会自动闭合，而无须调用closePath。

画一个简单图形（如三角形）的代码如下。

ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill();

moveTo
是一个十分有用的方法，虽然并不能用它来画什么，但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。它接受x
和y（新的坐标位置）作为参数。当 canvas 初始化或者调用beginPath的时候，起始坐标设置就是原点(0,0)。大多数情况下，我们用moveTo方法将起始坐标移至其它地方，或者用于绘制不连续的路径。看看下边的笑脸，红线就是使用moveTo 移动的轨迹。

ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); ctx.beginPath(); ctx.moveTo(40,75); ctx.lineTo(60,65); ctx.lineTo(90,65); ctx.moveTo(110,75); ctx.lineTo(125,75); ctx.stroke();