Рисование изображения на холст html5

Я пытаюсь нарисовать изображение на холсте html5, но не могу точно запомнить, как это делается.Рисование изображения на холст 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, и я не могу понять, что я делаю неправильно ... Может ли кто-нибудь указать мне в правильном направлении?

Приветствия,

Редактировать

код обновляется, чтобы отразить изменения, как предложено, но я все еще с той же проблемой. Любые другие предложения?

источник

2012-11-12 someone2088

рекомендуют близко «слишком локализованы», так как ошибка просто опечатка и ничего общего с содержанием вопроса. – Alnitak

опечатка в коде:

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/

источник

2012-11-12 13:06:13 jazzytomato

Спасибо за ваш ответ. Я сделал предложенные изменения и сохранил файл, но когда я перезагружаю страницу в браузере, я все равно получаю пустой холст ... – someone2088

Любые другие предложения? – someone2088

Удалите и функцию drawStartButton тоже, как и в скрипке. Он может быть вызван перед функцией window.onload, поэтому холст не существует, когда вы пытаетесь нарисовать его – jazzytomato

Рисование изображения на холст html5

ответ

Смежные вопросы