Question

好吧，伙计们，我一直试图让这个好几个小时，我找不到任何东西。

有人可以输入快速脚本，或者指向我的教程方向..

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

有什么想法吗？

非常感谢！

Answer 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();
});

Answer 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：http://jsfiddle.net/96s20d7m/

我将x和y值设置为您在画布上点击的位置，然后使用fillRect()绘制一些内容。

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

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

像这样：http://jsfiddle.net/96s20d7m/4/

再次，用矩形代替你的图像。

我希望这能帮助今年读书的人！

HTML5 Canvas - 在鼠标坐标处鼠标单击时添加图像

2 个答案: