為什么我不能在畫布上繪制圖像？

Question

我有一個畫布和一個按比例縮小圖像的div。 我想將按比例縮小的圖像之一拖到畫布中。 單擊圖像時，應保存src，以便如果將該圖像拖放到畫布中，則將以原始比例繪制。 由於某種原因，此代碼無法正常工作...

HTML

<div id="LeftColumn">
    <canvas id="Canvas">
    </canvas>
</div>

<div id="TextureViewInside">
    <ul class="products">
        <img onclick="getSource(this.src)" id="firstPic" src="FärgadePapper.png">
            <img src="Hajar.png">
            <img src="Labyrint.png">
            <img src="Martini.png">
            <img src="FärgadePapper.png">
    </ul>
</div>

JavaScript的

function first(){
    canvas = document.getElementById('Canvas');
    var ctx = canvas.getContext("2d");
    canvas.addEventListener("dragenter", function(e){e.preventDefault();}, false);
    canvas.addEventListener("dragover", function(e){e.preventDefault();}, false);
    canvas.addEventListener("drop", dropped, false);
}
function getSource(scr){
    alert(src);
    a = new image();
    a.src = src;
}
function dropped(){
    canvas.drawImage(a, 0, 0);
}
window.addEventListener("load", first, false);

Answer 1

應該是new Image() ，而不是帶有小寫字母“ i”的“ image”。 另外，您需要使用上下文而不是畫布直接繪制圖像。 同樣在getSource()函數中，您調用了參數“ scr”，但函數中的代碼將其稱為“ src”。

另外，您確實應該在某處顯式聲明“ a”。