1

索引.html

<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);
}

当我尝试在 chrome 中加载 index.html 时，它不会加载背景图像。但是，当我将 img 标签的 src 硬编码到该路径时，它会继续加载它。

chrome给我的唯一错误是：

Uncaught SyntaxError: Unexpected token 。

它将这个错误指向 dcview.js 中的第 47 行。

我这样做的方式完全错误吗？我是 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);
    };
}

更新

加载背景图像后，我在顶部绘制的其他图像将被绘制在背景图像下方。想法？

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);
}
4

1 回答 1

1

您可以使用 Javascript Image 类绘制到画布上。请参阅 MDN 上的这篇文章。

于 2013-03-20T16:55:42.957 回答