html 画布鼠标点击状态,HTML5画布 - 在鼠标点击时添加图像，在鼠标坐标

为响应晚真是不好意思。我知道这个问题比上帝更古老，但还没有一个可以接受的答案，所以我想我会为那些不想使用外部图书馆的人投入我的两分钱。

我为你写了一个简约的脚本，它会做你想做的 - 只需要相应地将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);

我设置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

);

再次，替代矩形为你的形象。

我希望这有助于任何人阅读今年以后！