【发布时间】：2014-03-11 10:29:39
【问题描述】：
我正在编写一个教育编程环境（部分是为了我自己的经验，部分是为了我的学生）。
作为此环境的一部分，我试图将图像放置到网格上。网格画得很好，但是图像没有出现。控制台中没有出现错误。
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";
}
非常感谢任何帮助。
【问题讨论】：
标签： javascript html canvas drawimage