Question

我试图绘制的图片不起作用。当我在javascript中运行函数时，我收到此错误：

Uncaught TypeError: context.drawImage is not a function
    at Image.drawing.onload (test.js:74)
test.js:82 Uncaught TypeError: context.drawImage is not a function
    at Image.drawing.onload (test.js:82)

这是我的代码：

HTML：

<html>
<head>
    <title>Maze</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script type="text/javascript" src="js/test.js"></script>
    <style type="text/css">
        #maze {
            border-collapse: collapse;
        }
        #maze td {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>

<table id="maze">
    <tbody></tbody>
</table>
<canvas>
<script>
    var disp = newMaze(20,20);
    for (var i = 0; i < disp.length; i++) {
        $('#maze > tbody').append("<tr>");
        for (var j = 0; j < disp[i].length; j++) {
            var selector = i+"-"+j;
            $('#maze > tbody').append("<td id='"+selector+"'>&nbsp;</td>");
            if (disp[i][j][0] == 0) { $('#'+selector).css('border-top', '2px 
solid black'); }
            if (disp[i][j][1] == 0) { $('#'+selector).css('border-right', '2px 
solid black'); }
            if (disp[i][j][2] == 0) { $('#'+selector).css('border-bottom', '2px 
solid black'); }
            if (disp[i][j][3] == 0) { $('#'+selector).css('border-left', '2px 
solid black'); }
        }
        $('#maze > tbody').append("</tr>");
    }
</script>
</canvas>
</body>
</html>

JS：

function newMaze(x, y) {

// Establish variables and starting grid
var totalCells = x*y;
var cells = new Array();
var unvis = new Array();
for (var i = 0; i < y; i++) {
    cells[i] = new Array();
    unvis[i] = new Array();
    for (var j = 0; j < x; j++) {
        cells[i][j] = [0,0,0,0];
        unvis[i][j] = true;
    }
}

// Set a random position to start from
var currentCell = [Math.floor(Math.random()*y), Math.floor(Math.random()*x)];
var path = [currentCell];
unvis[currentCell[0]][currentCell[1]] = false;
var visited = 1;

// Loop through all available cell positions
while (visited < totalCells) {
    // Determine neighboring cells
    var pot = [[currentCell[0]-1, currentCell[1], 0, 2],
        [currentCell[0], currentCell[1]+1, 1, 3],
        [currentCell[0]+1, currentCell[1], 2, 0],
        [currentCell[0], currentCell[1]-1, 3, 1]];
    var neighbors = new Array();

    // Determine if each neighboring cell is in game grid, and whether it has already been checked
    for (var l = 0; l < 4; l++) {
        if (pot[l][0] > -1 && pot[l][0] < y && pot[l][1] > -1 && pot[l][1] < x && unvis[pot[l][0]][pot[l][1]]) { neighbors.push(pot[l]); }
    }

    // If at least one active neighboring cell has been found
    if (neighbors.length) {
        // Choose one of the neighbors at random
        next = neighbors[Math.floor(Math.random()*neighbors.length)];

        // Remove the wall between the current cell and the chosen neighboring cell
        cells[currentCell[0]][currentCell[1]][next[2]] = 1;
        cells[next[0]][next[1]][next[3]] = 1;

        // Mark the neighbor as visited, and set it as the current cell
        unvis[next[0]][next[1]] = false;
        visited++;
        currentCell = [next[0], next[1]];
        path.push(currentCell);
    }
    // Otherwise go back up a step and keep going
    else {
        currentCell = path.pop();
    }
}
debugger
drawUser(currentCell[0],currentCell[1]);
var first = currentCell[0] + 10;
var second = currentCell[1] + 10;
if(first >= 20){
    first = currentCell[0] - 10;
}
if(second >= 20){
    second = currentCell[1] - 10;
}
drawJewel(first,second);
return cells;
}
function drawUser(x,y){
    var context = document.getElementById("maze");
    drawing = new Image();
    drawing.src = "img/userpic.png";
    drawing.onload = function() {
        context.drawImage(drawing,x,y);
    };
}
function drawJewel(x,y){
    var context = document.getElementById("maze");
    drawing = new Image();
    drawing.src = "img/diamondpic.png";
    drawing.onload = function() {
        context.drawImage(drawing,x,y);
    };
}

HTML中脚本标签周围的画布标签是我修复的尝试之一，以及JS代码中的调试器。

我是jQuery的新手，但它需要用于生成迷宫。我试图做的就是显示图像，diamondpic.png和userpic.png，这两个图像都是20x20像素绘制的，位于两个独立的随机单元格的迷宫中。我不熟悉＆＃34; canvas＆＃34;或＆＃34; context＆＃34;我认为这是问题所在。

任何帮助表示感谢。

Answer 1

这里有几个问题。首先，#maze元素是一个表，而不是画布。如果要使用画布绘制图像，则需要在canvas元素上绘制，而不是在表格上绘制。

其次，您需要将context定义为canvas元素的2d上下文。替换

var context = document.getElementById("maze");

带

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

图片无法通过Javascript

1 个答案: