我想在画布上绘制图像,但是图像只会在单击画布时显示在该位置。我还学习了该element.getBoundingClientRect
方法,该方法将使我能够获取画布的偏移量。我想将它们组合起来,所以当单击画布的任何部分时,图像将出现在同一位置,并且X和Y偏移也将显示出来。
当前,我的图像将在加载时显示,当我在画布上单击时如何更改图像,该图像将出现在同一位置。第二件事是同时显示图像的X和Y偏移位置。
像这样修改您的JS代码:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
$results=$("#results");
$dotposition=$("#dotposition");
var position = {x: 0, y: 0};
function handleMouseMove(e) {
e.preventDefault();
e.stopPropagation();
// You could calc the offsets once if you know
// the user will not scroll the canvas
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
$results.text("Mouse position: "+mouseX+" / "+mouseY);
position.x = mouseX;
position.y = mouseY;
}
function handleMouseClick(e) {
//Clearing the canvas before redraw, remove this line if you want to keep prev images
ctx.clearRect ( 0 , 0 , canvas.width , canvas.height );
ctx.drawImage(img,position.x - img.width / 2,position.y - img.height / 2);
$dotposition.text("Dot position: "+position.x+" / "+position.y);
}
var img = new Image();
img.onload = function(){
canvas.onmousemove = handleMouseMove;
canvas.onclick = handleMouseClick;
};
img.src="https://dl.dropboxusercontent.com/s/7vlxwy1156wnhcw/redFood.png";
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句