1

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

index.htmlをChromeで読み込もうとすると、背景画像が読み込まれません。しかし、imgタグのsrcをそのパスにハードコーディングすると、ロードが続行されます。

クロムが私に与える唯一のエラーは次のとおりです。

Uncaught SyntaxError：予期しないトークン。

このエラーは、dcview.jsの47行目を示しています。

私がこれについて行っている方法は完全に間違っていますか？私はHTMLとJavascriptの初心者です。

ありがとう、

Virat

更新しました

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

JavascriptImageクラスを使用してキャンバスに描画できます。MDNに関するこの記事を参照してください。

于 2013-03-20T16:55:42.957 に答える