HTML5 Canvas - 在鼠标点击时添加图像，在鼠标坐标处答案

【问题标题】：HTML5 Canvas - Add image on mouse click, at mouse coordinatesHTML5 Canvas - 在鼠标点击时添加图像，在鼠标坐标处
【发布时间】：2020-01-20 07:29:04
【问题描述】：

好的，伙计们，我已经尝试了好几个小时了，我找不到任何东西。

谁能输入一个快速的脚本，或者指点我这个教程的方向..

当用户单击画布时，我希望画布上出现图像 (imgObj)。我希望图像出现在用户单击时鼠标所在的坐标处。

有什么想法吗？

非常感谢！

【问题讨论】：

标签： html canvas

【解决方案1】：

你可以从这里开始：http://www.html5canvastutorials.com/

这是关于 HTML5 Canvas 的教程。

KineticJS 是一个让这一切变得非常简单的库：http://www.kineticjs.com/

基本上使用 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();
});

【讨论】：

【解决方案2】：

这是一个不使用外部库的解决方案 - 只需通过将 fillRect() 相应地更改为 drawImage() 来将矩形替换为您的图像：

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);

（工作示例的JSFiddle）

它将x 和y 设置为画布点击位置，然后使用fillRect() 进行绘制。

请注意，这并不总是按预期工作，因为 pageX 和 pageY 会根据边框、填充、边距等进行更改。您可以在 Fiddle 中看到这一点。要完成这项工作，只需将 pageX/pageY 更改为 offsetX/offsetY，或使用 polyfill。

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
);

见this小提琴。

【讨论】：