Question

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

所以只有当我在画布上点击时，一个小图像才会出现在我点击画布上的位置上。

任何人都可以帮助我吗？

Answer 1

首先要记住的是，您需要捕获相对于画布的坐标，而不是整个页面，这正是您从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加载，然后在图像完成加载后，将其添加到画布。

在画布上单击Onclick时，将图像添加到画布上

1 个答案: