1
index.htmlМожете ли вы загрузить src тега img внутри javascript-файла, а затем нарисовать его на холсте?
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>DCView</title>
<script type="text/javascript" src="dcview.js"></script>
</head>
<body>
<div style="float:center; text-align:center;">
<canvas id="dcviewCanvas" width="1024" height="1024"/>
<img id="bgImage" src="" hidden="true"/>
</div>
</body>
</html>
dcview.js
var backgroundImage,
backgroundImageSrc,
canvas,
context;
window.onload = function()
{
//Initially set the background image source to DCView.png
backgroundImageSrc = "Foundation\\WebService\\Downloads\\DCView.png";
//Load the background image with the given source
loadBackgroundImage(backgroundImageSrc);
}
function loadBackgroundImage(imageSrc)
{
canvas = document.getElementById("dcviewCanvas");
context = canvas.getContext("2d");
backgroundImage = document.getElementById("bgImage");
backgroundImage.src = imageSrc;
context.drawImage(backgroundImage, 0, 0);
}
При попытке загрузить файл index.html в хроме не загружается фоновое изображение. Но когда я жестко кодируют ГКЗ IMG тега на этом пути, он идет, чтобы загрузить его в
только хром ошибка дает мне это:.
Uncaught SyntaxError: Unexpected token .
Он указывает эту ошибку в строке 47 в dcview.js.
Является ли это тем, что я собираюсь сделать это совершенно неправильно? Я начинаю с HTML и Javascript.
Спасибо,
вират
ОБНОВЛЕНО
dcview.js
window.onload = function()
{
//Initially set the background image source to DCView.png
backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';
//Load the background image which is initially set to DCView.png
loadBackgroundImage(backgroundImageSrc);
//Load the other various pin images;
loadPinImages();
}
function loadBackgroundImage(imageSrc)
{
context = document.getElementById('dcviewCanvas').getContext('2d');
backgroundImage = new Image();
backgroundImage.src = imageSrc;
backgroundImage.onload = function(){
context.drawImage(backgroundImage, 0, 0);
};
}
ОБНОВЛЕНО
После того, как я ВГА e загружено фоновое изображение, другие изображения, которые я рисую сверху, рисуются под фоновым изображением. Идеи?
window.onload = function()
{
//Initially set the background image source to DCView.png
backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';
//Load the background image which is initially set to DCView.png
loadBackgroundImage(backgroundImageSrc);
canvas = document.getElementById('dcviewCanvas');
context = canvas.getContext('2d');
context.drawImage(sortationLanePinBlue, 0, 0);
}
Я не считал, но это не похоже, что вы показали нам 47 строк кода здесь. – CBroe
Вы правы, я удалил код при публикации этого вопроса по сравнению с оригиналом. В основном это указывает на строку: "window.onload = function()" Спасибо – azadvirat
Я не знаю, является ли это причиной ваших проблем, но кажется, что вы назначаете значение свойства .src для backgroundImage и затем попытаемся получить доступ к свойству .src на следующей строке. Это не совсем правильно. – bmceldowney