在 JS 中绘图不起作用

Question

我正在用 java 脚本制作 3d 游戏，但这张图片不是绘图。控制台以太中没有出现错误。它告诉我它画了，但我什么也没看到。这不是源的问题。它告诉我那里有一堵墙，但它没有画。我知道 canvas.

不是问题

完整代码：http://jsfiddle.net/andmoreguy/wja8atd0/

声明图像：

var wall1 = new Image();

正在声明地图：

var map = [];
map = [
[1,1,1,1,1,1],
[1,0,0,0,1,1],
[1,0,0,0,0,1],
[1,0,0,0,0,1],
[1,0,0,0,0,1],
[1,1,1,1,1,1]
];

正在声明高度图：

var height = [];
height = [
[9,9,4,1,3,1],
[1,0,0,0,3,4],
[2,0,0,0,0,5],
[3,0,0,0,0,6],
[4,0,0,0,0,7],
[5,6,7,8,9,8]
];

渲染函数a = 45:

function renderblocks(a){
var j = 0;
for(var i = 0;i < 7;i++){
    var check = checkblocks(a + j, i)
    if(check == true){wall.onload = wall(i, dist);
    console.log(true);
    }
    wall1.src = "assets/slide.png";
    j++;
}
}

检查块功能：

function checkblocks(a, numb){
var stepy = 64;
var stepx = 64/Math.tan(a);
for(i=0;i<3;i++){
    var x = stepx*i;
    var y = stepy*i;
    x = x/64;
    y = y/64;
    console.log(map[x][y])
    dist = stepy * i / a;
    if (map[x][y] == 1){ return true;}
}
}

和 Wall 函数：

function wall(numb, dist){
ctx.drawImage(wall1,numb*91,4,91,height[x][y]*64);
console.log("it drew")
}

Answer 1

好的。从您的代码中，我不太确定您希望最终产品看起来像什么，或者您想要对高度做什么。但是我做了一个例子，使用地图的1s和0s在canvas上绘制或不绘制墙部分。尝试一下这个，我想你会明白的。

for (var m = 0;m<6;m++){
    for (var n=0;n<6;n++){
        if(map[m][n]){
            ctx.drawImage(wall1,m*50,n*50,50,50); 
        }
    }
}

JSFiddle

在 JS 中绘图不起作用

Drawing in JS not working

html

javascript

3d