7.6 KiB

Raw Permalink Blame History Unescape Escape

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

课前测验

画布

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

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

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

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

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

绘制简单几何图形

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

图片来源：MDN

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

获取引用：获取Canvas元素的引用。
获取引用：获取位于Canvas元素上的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.6 KiB Raw Permalink Blame History Unescape Escape