Question

我正在编写一个教育编程环境（部分是为了我自己的经验，部分是为了我的学生）。

作为此环境的一部分，我正在尝试将图像放到网格上。网格绘制正常，但图像不会出现。控制台中没有出现错误。

HTML：

<html>
    <head>
        <title>Grid!</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <script src="grid.js"></script>
    <head>
    <body>
        <canvas id="myCanvas" width="510" height="510" >Your browser does not support HTML canvas.</canvas>
        <input type="button" id="go" value="Go" onclick="drawGrid();">
    <body>
<head>

和Javascript（不确定可能需要什么，所以我添加了迄今为止我所拥有的一切）。我不会显示绘制狗图像时的调试警报。

//The walls arrays
var wallsX = new Array();
var wallsY = new Array();
var wallsO = new Array();

//The canvas variables
var c;
var ctx;

//The dog position variables
var doxX;
var dogY;
var dog;

//Load the dog image
dog = new Image();
dog.onload = function() 
{
    alert("Image loaded");
    //Draws the dog
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");
    ctx.drawImage(dog, 10, 360, 40, 40);
}
dog.scr = "img\dog.png";


function start()
{
    //Temporary start function
    readWalls();
    buildWalls();
}

function buildWalls()
{
    //This function cycles through all of the walls and calls a function to display them
    var cnt = wallsX.length;
    for (var i = 0; i < cnt; i++)
    {
        placeWall(wallsX[i], wallsY[i], wallsO[i]);
    }
}

function placeWall(xLoc, yLoc, orientation)
{
    //This function places the wall onto the canvas based on it's position
    //Set the stroke colour
    ctx.beginPath();
    ctx.strokeStyle= "#FF0000";

    //Determine the start x and y coordinate of the wall
    var xCo = getWallCo(xLoc);
    var yCo = getWallCo(yLoc);
    var tmp;

    //Draw the wall
    if (orientation == "horizontal")
    {
        ctx.moveTo(xCo, yCo);
        tmp = xCo + 50;
        ctx.lineTo(tmp, yCo);
        ctx.stroke();
    }
    else
    {
        ctx.moveTo(xCo, yCo);
        tmp = yCo + 50;
        ctx.lineTo(xCo, tmp);
        ctx.stroke();
    }
}

function getWallCo(loc)
{
    //This function returns the coordinate based on the wall location
    var val = 0;
    switch (loc)
    {
        case 0:
            val = 35;
            break;
        case 1:
            val = 85;
            break;
        case 2:
            val = 135;
            break;
        case 3:
            val = 185;
            break;
        case 4:
            val = 235;
            break;
        case 5:
            val = 285;
            break;
        case 6:
            val = 335;
            break;
        case 7:
            val = 385;
            break;
        case 9:
            val = 435;
            break;
        case 10:
            val = 485;
            break;
    }
    return val;
}

function drawGrid()
{
    //This function draws the initial grid in the canvas space
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.strokeStyle= "#000000";
    var xCo = 10;
    var yCo = 10;
    var tmp;

    ctx.rect(10,10,500,500);
    //Print vertical lines on the canvas
    for (var i = 0; i < 11; i++)
    {
        ctx.moveTo(xCo, yCo);
        tmp = yCo + 500;
        ctx.lineTo(xCo, tmp);
        ctx.stroke();
        xCo += 50;
    }
    //Print horizontal lines on the canvas
    xCo = 10;
    yCo = 10;
    for (var i = 0; i < 11; i++)
    {
        ctx.moveTo(xCo, yCo);
        tmp = xCo + 500;
        ctx.lineTo(tmp, yCo);
        ctx.stroke();
        yCo += 50;
    }
    //Temporary start function
    start();
}

function readWalls()
{
    //These lines are sample walls
    wallsX[0] = 5;
    wallsY[0] = 7;
    wallsO[0] = "horizontal";
    wallsX[1] = 6;
    wallsY[1] = 6;
    wallsO[1] = "vertical";
    wallsX[2] = 6;
    wallsY[2] = 6;
    wallsO[2] = "horizontal";
}

任何帮助都很明确。

Answer 1

这个功能有误：

dog.onload = function() 
{
  alert("Image loaded");
  //Draws the dog
  c = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(dog, 10, 360, 40, 40);
}

你做

ctx = canvas.getContext("2d");

应该是

ctx = c.getContext("2d");

Answer 2

你是如何尝试代码的？在服务器上还是没有？

如果您没有按服务器访问html，可能会发生跨域问题。

或者您可以将html更改为：

<html>
<head>
    <title>Grid!</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

<head>
<body>
    <canvas id="myCanvas" width="510" height="510" >Your browser does not support HTML canvas.</canvas>
    <input type="button" id="go" value="Go" onclick="drawGrid();">
    <script src="grid.js"></script>
<body>

在drawImage（）调用后，Canvas不显示图像

2 个答案: