Javascript 在html5画布上绘制图像_Javascript_Html5 Canvas

Javascript 在html5画布上绘制图像

javascript html5-canvas

Javascript 在html5画布上绘制图像,javascript,html5-canvas,Javascript,Html5 Canvas,我试图在html5画布上绘制一幅图像，但记不清它是如何完成的我有以下html文档： <html> <head> <title>Understanding Business</title> <section hidden> <img id = "startButton" src = "startButton.png" alt = "Start Button" height = "40" width = "50" href = "

我试图在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画布。
window.onload=函数（）{
var gameCanvas=document.getElementById（“gameCanvas”）；
var context=gameCanvas.getContext（“2d”）；
//gameCanvas.addEventListener（'onclick'，clickReporter，false）；
gameCanvas.addEventListener（'mouseMove'，函数（事件）{
var mousePosition=getMouseCoords（游戏画布，事件）；
});
/*添加一些全局变量*/
var image=新图像（）；
var成像源；
var-imageX；
var影像学；
函数drawStartButton（）{
/*image.onload=函数（）{
上下文。drawImage（图像，500250）；
};
image.src=“startButton.png”*/
var startButtonImg=document.getElementById（“startButton”）；
drawImage（startButtonImg，500250）；
}
函数drawFirstGameElements（）{
drawDescriptionBox1；
}
函数drawDescriptionBox1（）{
上下文。移动到（100400）；
lineTo（150400）；
lineTo（150450）；
lineTo（100450）；
lineTo（100400）；
上下文。移动到（110425）；
上下文。strokeText（“资产”）；
}
//函数获取画布上的鼠标坐标
函数getMouseCoords（游戏画布，事件）{
var rect=gameCanvas.getBoundingClientRect（），root=document.documentElement；
//返回鼠标位置
var mouseX=event.clientX-rect.top-root.scrollTop；
var mouseY=event.clientY-rect.left-root.scrollLeft；
返回{
x:鼠标，
y:老鼠
};
}
}

出于某种原因，当我在浏览器中查看页面时，尽管画布显示，但“开始按钮图像”不会显示在画布上。自从我上次使用HTML5画布已经有一段时间了，我不太明白我做错了什么。。。有人能给我指出正确的方向吗

干杯

编辑

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

在代码中输入错误：

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 }

jsFIDLE:

建议关闭“太本地化”，因为错误只是打字错误，与问题内容无关。谢谢您的回复。我已经做了建议的更改，并保存了文件，但是当我在浏览器中重新加载页面时，我仍然得到一个空白画布…删除函数drawStartButton，就像我在小提琴中做的那样。它可能在window.onload函数之前被调用，因此当您尝试绘制画布时，画布不存在