ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}
function makeShip() {
// Draw saucer bottom.
ctx.beginPath();
ctx.moveTo(28.4, 16.9);
ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
ctx.closePath();
ctx.fillStyle = "rgb(222, 103, 0)";
ctx.fill();
// Draw saucer top.
ctx.beginPath();
ctx.moveTo(22.3, 12.0);
ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
ctx.closePath();
ctx.fillStyle = "rgb(51, 190, 0)";
ctx.fill();
}
</script>
</head>
<body onload="canvasSpaceGame()">
<h1>
Canvas Space Game
</h1>
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>
Canvas 代码示例讨论
本节说明本代码示例的设计和结构。 它为您讲解代码的不同部分，以及整合它们的方式。 Canvas 示例使用标准 HTML5 标头 ，以便浏览器可以将它作为 HTML5 规格的一部分加以区别。
代码分成两个主要部分：
1.主体代码
2.脚本代码
主体代码
在页面加载时，主体标记使用 onload 函数调用 canvasSpaceGame 函数。 Canvas 标记是主体的一部分。 指定了 Canvas 初始宽度和高度，还指定了 ID 属性。 必须使用 ID，才能将 canvas 元素添加到页面的对象模型中。
脚本代码
脚本代码包括三个函数： canvasSpaceGame、stars 和 makeShip。 加载页面时将调用 canvasSpaceGame 函数。 stars 和 makeShip 都是从 canvasSpaceGame 调用的。
canvasSpaceGame 函数
加载页面时将调用此函数。 它通过在主体代码中使用 Canvas 元素 ID 来获取画布， 然后获取画布的上下文，并准备好接受绘图。 将上下文初始化为 2D 画布后，使用 fillStyle、rect 和 fill 方法将画布绘制为黑色。
stars 函数
此函数是从 canvasSpaceGame 调用的。 它使用 for loop 在二维平面上生成 50 个潜在的星星位置，然后使用 fillStyle 创建白色。 随后，会进行一项检查，确认 x,y 坐标是否与左上角过于靠近。 如果星星绘制得与左上角过于靠近，则会将 fillStyle 更改为黑色，使其不会妨碍宇宙飞船。 随后，使用 arc 方法绘制每个星星并使用相应的填充颜色。
makeShip
此函数是从 canvasSpaceGame 调用的。 使用一系列的 beginPath、moveTo、bezierCurveTo、closePath、fillStyle 和 fill 方法，绘制一个简单的宇宙飞船。
飞船是通过绘制两个椭圆来创建的，一个椭圆在另一个的上面。 它首先在 Adobe Illustrator CS5 中绘制，然后使用 http://visitmix.com/labs/ai2canvas/ 的 Ai2Canvas 插件将图像导出到 Canvas。 生成的 Canvas 代码已复制并粘贴到此示例的代码中。
