MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

创建、绘制画布

这篇翻译不完整。请帮忙从英语翻译这篇文章

本篇是 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代码调试工具)上:

Exercise: try changing the size and color of the given shapes.

下一节

现在我们已经创建了基本的HTML和关于画布的基本知识。我们继续第二节,如何让球在游戏中动起来 — 让球动起来

文档标签和贡献者

 此页面的贡献者: ziyunfei, jiii
 最后编辑者: jiii,