Html5 canvas 在画布上单击时将图像添加到画布

目前我已经设置了一个画布，我正在尝试添加一些图像到画布上

因此，只有当我在画布上单击时，小图像才会出现在我在画布上单击的位置上

---

有人能帮我吗？

首先要记住的是，您需要捕获画布的坐标，而不是整个页面的坐标，这正是您将从onclick事件中获得的坐标。这很容易翻译，代码如下：

var onMouseClick = function(evt){
    var x, y;
    var point = findOffset(e.target);
    x = e.pageX - point.x;
    y = e.pageY - point.y;

    return {x,y};
}


var findOffset = function(element) {
    var left = 0;
    var top = 0;
    if (element.offsetParent) {
        do {
            top += element.offsetTop;
            left += element.offsetLeft;
        } while(element = element.offsetParent);
        return {
            x : left,
            y : top
        };
    }
};

其中，onMouseClick回调返回一个对象，该对象的x，y位置是在画布中单击发生的位置

接下来，您将希望在此处插入图像。如何做到这一点在某种程度上取决于图像源的位置，但它基本上看起来像：

var canvasCtx = document.getElementById("myCanvasElement").getContext('2d');
var img = document.getElementById("id-of-an-img-tag-in-your-DOM");
canvasCtx.drawImage(img,x,y);

如果您想从DOM以外的地方加载图像，您可以自己构建图像对象，如下所示：

var img = new Image();
img.onload = function(){
    canvasCtx.drawImage(img,x,y);
};

img.src = "url/to/your/image.jpg";

---

这将导致在鼠标单击时从URL加载图像，然后在图像完成加载后，将其添加到画布。

DOM中img标记的id是指HTML中某个标记的id。如果这不是你获得图像的来源，那么不要使用它。相反，请使用var img=new Image代码片段从URL加载图像。@BrandonDockery。查看element.getBoundingClientRect方法，这是获取画布偏移的更简单方法。这种方法的优点是可以考虑滚动-@markE Hi，你知道如何使用你的方法吗？var BB=canvas.getBoundingClientRect；var offsetX=BB.left；var offsetY=BB.top@Bernard，下面是一个使用getBoundingClientRect的演示：