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”的“图像”。此外，您需要使用上下文而不是画布直接绘制图像。同样在getSource()函数中，您调用了参数“scr”，但函数中的代码将其称为“src”。

另外你真的应该在某处明确声明“a”。

为什么我不能将图像画入画布？

1 个答案: