为什么我不能将图像绘制到画布中？答案

【问题标题】：Why can't i draw an image into a canvas?为什么我不能将图像绘制到画布中？
【发布时间】：2013-11-11 01:16:31
【问题描述】：

我有一个画布和一个带有缩小图像的 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);

【问题讨论】：

如果您关心此类内容，您在图像周围使用<ul> 的标记并不是真正有效的。 <ul> 元素应该只有 <li> 元素作为子元素。
另外，您可能在控制台中遇到错误。您应该始终检查并在您的 SO 问题中包含错误。
我做了，但没有任何反应。计划是能够用鼠标在画布中移动图像，有什么建议吗？

标签： javascript html image canvas src

【解决方案1】：

应该是new Image()，而不是带有小写“i”的“image”。此外，您需要使用 context 而不是直接使用画布来绘制图像。同样在您的getSource() 函数中，您将参数称为“scr”，但函数中的代码将其称为“src”。

而且你真的应该在某处明确声明“a”。

【讨论】：