javascript - 画布 2d 网格显示不会显示
问题描述
我有以下代码,它不会在控制台中引发任何错误。我正在尝试将二维数组显示为网格。使用正确的路径定义图像。但是,目前只会出现画布的轮廓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas { border: 2px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="400"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var arrayN = [
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,2,0,0,0,0],
[0,0,0,2,0,0,0,0],
[0,0,0,2,0,0,0,0],
[0,0,0,2,0,0,0,0],
[0,0,0,2,0,0,0,0],
[0,0,0,2,0,0,0,0]
];
var grey = new Image(32,32);
var forrest = new Image(32,32);
grey.src = '1.PNG';
forrest.src = '2.PNG';
var posX = 0;
var posY = 0;
for (let i = 0; i < arrayN.length; i++){
for (let j = 0; j < arrayN[i].length; j++){
if (arrayN[i][j] === 0){
ctx.drawImage(grey, posX, posY, 32,32);
}
if (arrayN[i][j] !== 0){
ctx.drawImage(forrest, posX, posY, 32,32);
}
posX +=32;
}
posX = 0;
posY +=32;
}
</script>
</html>
解决方案
我有一种感觉,主要原因是 JavaScript 的异步特性。也就是说,我们倾向于认为每一行都在前一行之后,这只是故事的一半。每行将按顺序开始,但不会等待前一行完成。因此,我相信您的 for 循环正试图在图像完成加载之前绘制它们。我尝试将它们放在一个setTimeout()
函数中,它可以工作。
window.setTimeout(function() {
// your for-loops here
}, 1000); // 1000 ms = 1 second of delay
当然,这假设图像在 1 秒内加载,但情况并非总是如此。所以相反,我建议使用window.onload
window.onload = function() {
for (let i = 0; i < arrayN.length; i++) {
for (let j = 0; j < arrayN[i].length; j++) {
if (arrayN[i][j] === 0) {
ctx.drawImage(grey, posX, posY, 32, 32);
}
if (arrayN[i][j] !== 0) {
ctx.drawImage(forrest, posX, posY, 32, 32);
}
posX += 32;
}
posX = 0;
posY += 32;
}
};
这应该足以解决它。但就个人而言,我会做
window.onload = () => {
for (let i = 0; i < arrayN.length; i++) {
for (let j = 0; j < arrayN[i].length; j++) {
ctx.drawImage(arrayN[i][j] === 0 ? grey : forrest, 32 * j, 32 * i, 32, 32);
}
}
};
它更简洁。几个解释:
window.onload = () => {
是一样的window.onload = function() {
。它只是使用新的 ES6 语法,我认为您至少对此有所了解,因为您使用的是let
关键字。在这方面,您可能需要考虑将所有关键字var
替换为let
orconst
。- 使用
posX
and是多余的posY
,因为它们每次只会增加 32,i
并且j
会被 for 循环自动递增,所以你不妨只使用i * 32
andj * 32
。posX
然后您可以完全删除变量posY
。 - 我建议不要使用两个测试相反条件的 if 语句。最好使用 if-else 语句。
? :
当您要更改的内容差异很小时,使用三元运算符 ( ) 会更好。在这种情况下,您只是更改 中的第一个参数drawImage
,所以我认为这是一个合适的情况。
希望对大家有所帮助!
推荐阅读
- python - 将 csv 转换为 json 作为字典键对列表(python)
- netsuite - 如何在 Suitelet 中设置 context.currentRecord?
- python - 如何确定 Google colab 中的文件路径?
- jquery - 显示 div onclick,添加类,在其他 div 上获取相同的过程
- android - QRScanner - 扫描路由器后导航不起作用
- php - 是否可以在仅数字的值上注入 sql?
- python - 如果图像包含特定颜色,则裁剪图像的线条
- mysql - 错误代码:1062。密钥“PRIMARY”的重复条目“2018-11-17 20:27:14”
- python-3.x - Python解释器在接收输入后关闭
- python - 防止短信验证滥用