图片未在JS中使用context.drawImage（）加载到画布上-基于图块的游戏

Question

我正在尝试使用画布在JavaScript / HTML中创建图块地图。 我将两个55 x 55像素的.png图像文件用于草地和水的纹理。

在“ for循环”数组期间，此游戏的图块未加载到画布中。 这两个图像文件都与.html页面位于同一文件夹级别。

任何帮助将不胜感激。

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var mapArray = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 1, 1, 0, 0, 0, 0, 0] [0, 0, 0, 1, 1, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]; var grass = new Image(); var water = new Image(); grass.src = 'grass_tile.png'; water.src = 'water_tile.png'; var posX = 0; var PosY = 0; for (var i = 0; i < mapArray.length; i++) { for (var j = 0; j < mapArray[i].length; j++) { if (mapArray[i][j] == 0) { context.drawImage(grass, posX, PosY, 55, 55); } if (mapArray[i][j] == 1) { context.drawImage(water, posX, PosY, 55, 55); } posX += 55; } posX = 0; posY += 55; }

 <style>#canvas { border: 1px solid black; } </style>

 <!doctype <!document html> <html> <head> <meta charset="utf-8"> <title>GAME</title> </head> <body> <canvas id="canvas" height="520px" width="520px"></canvas> </body> </html>

Answer 1

这里有几点：

您忘记在多维数组中放置逗号。
在某些地方您拥有var PosY ，在其他地方您拥有posY 。
您应该等待图像加载才能绘制它们。

 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var mapArray = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 1, 0, 0, 0, 0, 0], [0, 0, 0, 1, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]; var grass = new Image(); var water = new Image(); grass.src = 'https://fyldegrass.co.uk/wordpress/wp-content/uploads/2016/04/Lytham-Ebay-Top2-128x128.jpg'; water.src = 'data:image/jpeg;base64,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'; var posX = 0; var posY = 0; grass.onload = function () { draw(); }; function draw() { for (var i = 0; i < mapArray.length; i++) { for (var j = 0; j < mapArray[i].length; j++) { if (mapArray[i][j] == 0) { context.drawImage(grass, posX, posY, 55, 55); } if (mapArray[i][j] == 1) { context.drawImage(water, posX, posY, 55, 55); } posX += 55; } posX = 0; posY += 55; } }

 <style>#canvas { border: 1px solid black; } </style>

 <!doctype <!document html> <html> <head> <meta charset="utf-8"> <title>GAME</title> </head> <body> <canvas id="canvas" height="520px" width="520px"></canvas> </body> </html>

图片未在JS中使用context.drawImage（）加载到画布上-基于图块的游戏

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-10-30 23:24:29

图片未在JS中使用context.drawImage（）加载到画布上-基于图块的游戏

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-10-30 23:24:29

解决方案1
2 已采纳 2018-10-30 23:24:29