时间戳

首页 > 解决方案 > 除非我使用 setInterval，否则无法将图像绘制到画布上？

javascript - 除非我使用 setInterval，否则无法将图像绘制到画布上？

问题描述

const canvas = document.querySelector('#snake');
const ctx = canvas.getContext('2d');

//create canvas unit
const box = 32;

//load image files
const ground = new Image();
ground.src = 'img/ground.png';
const food = new Image();
food.src = 'img/food.png';

//load audio files
let dead = new Audio();
let eat = new Audio();
let up = new Audio();
let down = new Audio();
let left = new Audio();
let right = new Audio();

dead.src = 'audio/dead.mp3';
eat.src = 'audio/eat.mp3';
left.src = 'audio/left.mp3';
up.src = 'audio/up.mp3';
down.src = 'audio/down.mp3';
right.src = 'audio/right.mp3';

//create snake

let snake = [];

//draw canvas
ctx.drawImage(ground, 0, 0)
canvas {
  display: block;
  margin: 0 auto;
}
<canvas id="snake" width="608" height="608"></canvas>

我正在关注YouTube上关于如何使用 javascript 制作蛇游戏的教程。我复制了他的代码并将其注释掉。现在我正在一块一块地重建它，看看它是如何工作的，但不是一步一步的。

例如，一旦我创建了全局变量，我想将背景图像绘制到画布上只是为了查看它，ctx.drawImage(ground, 0, 0);这本身是行不通的。看着他在视频中这样做，他创建了一个绘图函数，将代码放入其中，然后将该函数设置为以 100 毫秒的间隔运行。

function draw() {
    ctx.drawImage(ground, 0, 0);
}

let game = setInterval(draw, 100);

现在有效了？？发生了什么？

这是他的 github https://github.com/CodeExplainedRepo/Snake-JavaScript

标签： javascript

解决方案

我知道我迟到了。看到那个教程后，我问自己同样的问题......

但是，您仍然可以通过简单地添加属性来解决这个问题background-image：

canvas id="snakeCanvas" width="608" height="608" style="background-image: url(img/ground.png)"

推荐阅读