[英]Javascript not drawing on canvas
在这里,我试图在画布上绘制图像(图像是瓷砖)。 但是,我已经检查过,循环工作得很好,代码正在执行,案例是正确的(我通过将文本记录到控制台来测试它)但是,控制台上没有绘制任何内容。 图像正在加载就好了。
我真的不知道究竟是什么导致了这个问题,控制台上没有语法错误。 以下是我的代码,任何人都可能需要一点时间来分析它,但非常感谢任何帮助。
这是下面脚本中定义的图像“monsterTileSheet.png”:
var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");
var image = new Image();
image.src = "monsterTileSheet.png";
image.addEventListener("load", loadHandler, false);
var spaceInc = 0; // increment counter
var inc = 5; // increment between the tiles
var imgSize = 80;
var map = [
[0, 0, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
function adjustCanvas() {
canvas.height = (map.length * imgSize) + (map.length * inc);
canvas.width = (map[0].length * imgSize) + (map[0].length * inc);
}
var monster = {
SIZE: 80,
frames: 5,
hiding: 0,
jumping: 1,
state: this.hiding,
sourceX: 0,
sourceY: 0,
currentFrame: 0,
COLUMNS: 3,
start: function () {
if (this.currentFrame < this.frames) {
this.sourceX = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
this.sourceY = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
this.currentFrame++;
renderImage();
} else {
window.clearInterval(interval);
this.sourceX = 0;
this.sourceY = 0;
this.currentFrame = 0;
}
}
};
var x = 0;
var y = 0;
function renderMap() {
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[0].length; j++) {
switch (map[i][j]) {
case 0:
drawingSurface.drawImage(image,
0, 0, monster.SIZE, monster.SIZE, (j * imgSize) + spaceInc, i * imgSize, imgSize, imgSize);
if (spaceInc >= (map[0].length - 1) * inc) {
// reset increment
spaceInc = 0;
} else {
spaceInc += inc;
}
console.log("Case 0");
break;
case 1:
x = map[i][j] * monster.SIZE
y = map[j] * monster.SIZE;
stGame();
console.log("Case 1");
break;
default:
console.log(j);
break;
}
}
}
}
function stGame() {
interval = window.setInterval(function () {
monster.start();
}, 300);
}
function loadHandler() {
adjustCanvas();
renderMap();
}
function renderImage() {
drawingSurface.drawImage(image,
monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE,
x, y, monster.SIZE, monster.SIZE);
}
我根据您的代码制作了一个小提琴: http : //jsfiddle.net/52GYB/2/
请注意,您已将 imgSize 设置为 80,而您提供的图像上的图块为 128x128 像素。 Canvas 正确渲染了图像,但只有左上角 80x80,全是白色,所以它看起来像一个错误。
也在这里:
case 1:
x = map[i][j]*monster.SIZE
y = map[j]*monster.SIZE; // map[j] is an Array not number
stGame();
console.log("Case 1");
break;
你乘以数组,所以在这个操作之后 y 是 NaN。
请记住确保在函数中传递正确的值。 在您选择的开发人员工具中使用 console.log() 或断点。
我不认为什么是问题来源,而是一个错误:
{
...
hiding: 0,
state: this.hiding, // <-- undefined
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.