HTML5画布-在鼠标坐标处单击鼠标添加图像

好了，伙计们，我已经试了好几个小时了，我什么也找不到

有没有人可以快速输入脚本，或者给我指一下这方面的教程

我希望当用户单击画布时，画布上会出现一个图像（imgObj）。我希望图像出现在用户单击鼠标时鼠标所在的坐标处

有什么想法吗

非常感谢

您可以从这里开始：

这是一个关于HTML5画布的教程

KineticJS是一个非常简单的库：

基本上，使用KineticJS，您可以使用以下方法来实现您的目标：

container.on("mousedown", function(){
      image.show();
 });

container.on("dragmove", function(){
     var mousePos = container.getMousePosition();
     var x = mousePos.x;
     var y = mousePos.y;
     image.move( x, y )
});

container.on("dragend"), function(){
     image.hide();
});

---

这里有一个不使用外部库的解决方案-只需将

fillRect（）

更改为相应的矩形即可替换图像：

var cn = document.getElementById("main");
var c  = cn.getContext("2d");
var mouse = {x:0, y:0};

window.addEventListener('mousedown', mHandler);

function mHandler(event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
};

function main() {
    c.clearRect(0, 0, cn.width, cn.height);
    c.fillStyle = "red";
    c.fillRect(mouse.x, mouse.y, 50, 50);
}

setInterval(main, 1000 / 60);

（关于工作实例）

它将

x

和

y

设置为画布单击位置，然后使用绘制

请注意，这并不总是像预期的那样有效，因为

pageX

和

pageY

会根据边框、填充、边距等进行更改。您可以在小提琴中看到这一点。要实现此功能，只需将

pageX

/

pageY

更改为

offsetX

/

offsetY

，或使用多边形填充

在

mHandler

函数中，类似这样的功能将更好地工作：

if(event.offsetX && event.offsetY) {
    mouse.x = event.offsetX;
    mouse.y = event.offsetY;
}
else {
    mouse.x = event.layerX;
    mouse.y = event.layerY;
}

或者缩短时间：

mouse.x = event.offsetX ? event.offsetX : event.layerX;
mouse.y = event.offsetY ? event.offsetY : event.layerY;

然后你可以打电话：

context.drawImage（imgObj，mouse.x，mouse.y，imgObj.width，imgObj.height）

如果您想将图片放在鼠标的中心，只需调用：

context.drawImage(
    imgObj, 
    mouse.x - imgObj.width / 2, 
    mouse.y - imgObj.height / 2, 
    imgObj.width, imgObj.height
);

看小提琴