创建、绘制画布
本篇是 Gamedev Canvas tutorial 10 节教程中的第一节。如果你完成了本篇教程之后，你可以从 Gamedev-Canvas-workshop/lesson1.html 看到源码。
在我们开始编写游戏功能之前，我们可以通过 HTML 的 canvas 标签创建支撑游戏的基本结构。
页面部分
HTML 文档的结构是非常简单的，我们的游戏将完全呈现在这个 HTML 的 canvas 标签中。你可以选择一款你最喜欢的文本编辑器，创建一个 HTML 文件，保存到你理想的位置，名称为 index.html。并添加以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
// JavaScript code goes here
</script>
</body>
</html>
在 head 标签中我们需要定义字符集（charset），标题（title）和一些基本的样式。在 body 标签中包含 canvas 标签和 javascript 标签，我们将在 javascript 标签中使用 JavaScript 代码来控制 canvas 标签中的内容展现。在 canvas 标签有一个名为 myCanvas 的 Id，根据这个属性我们可以很容易的获取到这个元素并设置他的宽为 480 像素，高为 320 像素。之后我们会将所有的 JavaScript 代码全部写到 javascript 标签中（<script>...</script>）。
画布的基本属性
要想在 canvas 标签中呈现图像内容，我们必须在 JavaScript 代码中获取到这个元素。在 javascript 标签中添加以下代码；
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
在这里我们可以声明一个变量保存 canvas 标签，然后我们需要创建变量 ctx, 这个变量可用来存储 2d 的渲染上下文，我们实际上就用它在 canvas 标签上绘制内容。
让我们来看一个例子，打印在画布上的红色正方形。添加以下代码到你的 JavaScript 里，然后在浏览器中打开 index.html 来看看效果。
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
把全部指令放到 ctx.beginPath() 方法 和 ctx.closePath() 方法之间。我们使用 ctx.rect() 方法创建了一个矩形。这个方法的第一组参数（20，40）是确定这个矩形的左上角在画布上的坐标，第二组参数（50, 50）是指定矩形的宽度和高度。例子中矩形左上角的 x 坐标为 20 像素，y 坐标为 40 像素；宽和高各为 50 像素，这样画出一个完美的正方形。ctx.fillStyle 属性是用于填充绘画的颜色，这里填充的颜色为红色。ctx.fill() 方法是填充路径的内容区域生成实心的图形。
我们不局限于绘制矩形 — 下面这段代码会绘制出一个绿色的圆；尝试添加到 JavaScript 代码的底部，保存并刷新：
ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI * 2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
正如你所见，我们再一次使用了 ctx.beginPath() 方法 和 ctx.closePath() 方法；在这两个方法中间，最重要的部分是 ctx.arc() 方法。它需要六个参数：
- 圆心的
x和y轴坐标 - 半径
- 起始角度，结束角度。以弧度计（弧的圆形的三点钟位置是 0 度）
- 规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。（可选）
ctx.fillStyle 属性的值看起来和之前不大一样。这是因为它与 CSS 一样，颜色可以指定为十六进制值也可以指定为 rgba() 函数，或者任何其他可用的颜色值函数。
当然我们也可以不使用 ctx.fill() 函数来填充图形和颜色，用 ctx.stroke() 函数来绘制定义图形的路径。试着将这段代码添加到你的 JavaScript:
ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();
上面的代码绘制出一个蓝色边框的空心矩形。由于 rgba() 函数的特性，边框为蓝色半透明的状态。
比对你的代码
以上是第一节的全部代码，可以运行在 JSFiddle（在线 JS 代码调试工具）上：
备注：练习：尝试改变给定几何图形的大小和颜色。