将图像绘制到 html5 画布答案

【问题标题】：Drawing an image to html5 canvas将图像绘制到 html5 画布
【发布时间】：2012-11-12 21:58:51
【问题描述】：

我正在尝试将图像绘制到 html5 画布，但不太记得它是如何完成的。

我有以下 html 文档：

<html>
<head>
<title>Understanding Business</title>

<section hidden>
<img id = "startButton" src = "startButton.png" alt = "Start Button" height = "40" width = "50" href = "javascript:drawFirstGameElements();">
</section>
</head>

<body onLoad = "drawStartButton()">
<h1>Understanding Business</h1>
<canvas id ="gameCanvas" width = "1000" height= "500" style = "border:1px solid #000000;">Your browser does not support the HTML5 canvas.</canvas>

<script type = "text/javascript">
window.onload = function(){ 
var gameCanvas = document.getElementById("gameCanvas");
var context = gameCanvas.getContext("2d");
//gameCanvas.addEventListener('onclick', clickReporter, false);
gameCanvas.addEventListener('mouseMove', function(event){
    var mousePosition = getMouseCoords(gameCanvas, event);

});
/* Add some global variables */
var image = new Image();
var imageSource;
var imageX;
var imageY;


function drawStartButton(){
/*image.onload = function(){
    context.drawImage(image, 500, 250);
};
image.src = "startButton.png"; */
var startButtonImg = document.getElementById("startButton");
context.drawImage(startButtonImg, 500, 250);
}

function drawFirstGameElements(){
drawDescriptionBox1;
}
function drawDescriptionBox1(){
context.moveTo(100, 400);
context.lineTo(150, 400);
context.lineTo(150, 450);
context.lineTo(100, 450);
context.lineTo(100, 400);
context.moveTo(110, 425);
context.strokeText("Asset");
}

//Function to get mouse coordinates on canvas
function getMouseCoords(gameCanvas, event){
var rect = gameCanvas.getBoundingClientRect(), root = document.documentElement;

//return mouse position
var mouseX = event.clientX - rect.top - root.scrollTop;
var mouseY = event.clientY - rect.left - root.scrollLeft;
return{
    x: mouseX,
    y: mouseY
};
}
}

由于某种原因，当我在浏览器中查看页面时，虽然显示了画布，但“开始按钮图像”并未显示在画布上。自从我上次使用 HTML5 画布以来已经有一段时间了，我无法弄清楚我做错了什么......有人能指出我正确的方向吗？

干杯，

编辑

更新了代码以反映建议的更改，但我仍然遇到同样的问题。还有其他建议吗？

【问题讨论】：

建议关闭“过于本地化”，因为该错误只是拼写错误，与问题的内容无关。

标签： javascript html5-canvas

【解决方案1】：

代码中的错字：

var gameCanvas = document.getElementById("gameCanvas");
var context = gameCanvas.getContext("2d");
//gameCanvas.addEventListener('onclick', clickReporter, false);
gameCanvas.addEventListener('mouseMove', function(event){
    var mousePosition = getMouseCoords(gameCanvas, event);

}); // HERE ADD );

/* Add some global variables */
var image = new Image();
var imageSource;
var imageX;
var imageY;
 //HERE DELETE THE }

jsfiddle：http://jsfiddle.net/RqbPn/

【讨论】：

感谢您的回复。我已经进行了建议的更改，并保存了文件，但是当我在浏览器中重新加载页面时，我仍然只是得到一个空白画布......
删除和函数 drawStartButton，就像我在小提琴中所做的那样。它可能会在 window.onload 函数之前调用，因此当您尝试在其上绘制时画布不存在