7.8 KiB

Raw Permalink Blame History Unescape Escape

构建太空游戏第二部分：将英雄和怪物绘制到画布上

课前测验

画布

画布是一个默认没有内容的 HTML 元素，它就像一块空白的画板。你需要通过在上面绘制来添加内容。

以下是它通常的声明方式，作为页面主体的一部分：

<canvas id="myCanvas" width="200" height="100"></canvas>

上面我们设置了 id、width 和 height。

id：设置这个属性以便在需要与其交互时获取引用。
width：这是元素的宽度。
height：这是元素的高度。

绘制简单几何图形

画布使用笛卡尔坐标系来绘制内容，因此它使用 x 轴和 y 轴来表示某物的位置。位置 0,0 是画布的左上角，而右下角则是你设置的画布的宽度和高度。

图片来源：MDN

要在画布元素上绘制内容，你需要完成以下步骤：

获取画布元素的引用。
获取画布上的 Context 元素的引用。
使用 Context 元素执行绘制操作。

上述步骤的代码通常如下所示：

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ Canvas API 主要专注于 2D 图形，但你也可以在网页上绘制 3D 元素；为此，你可以使用 WebGL API。

使用 Canvas API，你可以绘制各种内容，例如：

几何图形，我们已经展示了如何绘制矩形，但还有更多可以绘制的内容。
文本，你可以绘制任何字体和颜色的文本。
图像，你可以基于图像资源（例如 .jpg 或 .png）绘制图像。

✅ 试试吧！你已经知道如何绘制矩形，能否尝试在页面上绘制一个圆形？看看 CodePen 上一些有趣的 Canvas 绘图。这里有一个特别令人印象深刻的例子。

加载并绘制图像资源

通过创建一个 Image 对象并设置其 src 属性来加载图像资源。然后监听 load 事件，以便知道图像何时可以使用。代码如下：

加载资源

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

加载资源模式

建议将上述代码封装在一个结构中，这样更容易使用，并且只有在图像完全加载后才尝试操作它：

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

要将游戏资源绘制到屏幕上，代码如下：

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

现在开始构建你的游戏

要构建什么

你将构建一个包含 Canvas 元素的网页。它应该渲染一个黑色屏幕，大小为 1024*768。我们为你提供了两张图片：

英雄飞船
5*5 怪物

添加代码

在 your-work/app.js 中添加所需代码以完成以下任务：

绘制一个黑色背景的画布

提示：在 /app.js 中适当的 TODO 下添加两行代码，将 ctx 元素设置为黑色，并将顶部/左侧坐标设置为 0,0，高度和宽度等于画布的大小。
加载纹理

提示：使用 await loadTexture 并传入图像路径来添加玩家和敌人的图像。你暂时还看不到它们出现在屏幕上！
绘制英雄到屏幕底部中央

提示：使用 drawImage API 将 heroImg 绘制到屏幕上，设置 canvas.width / 2 - 45 和 canvas.height - canvas.height / 4)。

绘制 5*5 的怪物

提示：现在你可以取消注释代码以在屏幕上绘制敌人。接下来，进入 createEnemies 函数并完成它。

首先，设置一些常量：

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

然后，创建一个循环，将怪物数组绘制到屏幕上：

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

结果

完成后的结果应该如下所示：

解决方案

请先尝试自己解决，但如果遇到困难，可以查看解决方案。

🚀 挑战

你已经学习了使用专注于 2D 的 Canvas API；看看 WebGL API，尝试绘制一个 3D 对象。

课后测验

复习与自学

通过阅读相关内容了解更多关于 Canvas API 的知识。

作业

尝试使用 Canvas API

免责声明：
本文档使用AI翻译服务Co-op Translator进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原始语言的文档作为权威来源。对于关键信息，建议使用专业人工翻译。对于因使用本翻译而引起的任何误解或误读，我们概不负责。

7.8 KiB Raw Permalink Blame History Unescape Escape