將圖像繪制到html5畫布
[英]Drawing an image to 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 = "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畫布以來已經有一段時間了，但我還不太清楚我做錯了什么。有人可以向我指出正確的方向嗎？
干杯，
編輯
更新了代碼以反映建議的更改，但是我仍然遇到相同的問題。 還有其他建議嗎？
1 個解決方案
解決方案1
0 2012-11-12 13:06:13
在您的代碼中輸入：
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/
圖像未在畫布上繪制 (HTML5)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.