Fatal编程技术网
  • javascript/
  • Javascript 如何获得画布上图像的坐标？

Javascript 如何获得画布上图像的坐标？

javascript html canvas

Javascript 如何获得画布上图像的坐标？,javascript,html,canvas,Javascript,Html,Canvas,函数writeMessage（画布、消息）{ var context=canvas.getContext（'2d'）； clearRect（0，0，canvas.width，canvas.height）； context.font='12pt Calibri'； context.fillStyle='black'； 上下文。填充文本（消息，10，25）； } 函数getMousePos（画布，evt）{ var rect=canvas.getBoundingClientRect（）； 返回{ x

函数writeMessage（画布、消息）{
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
context.font='12pt Calibri'；
context.fillStyle='black'；
上下文。填充文本（消息，10，25）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
函数make_base（）{
基本图像=新图像（）；
base_image.src=https://www.w3schools.com/css/img_fjords.jpg';
base_image.onload=函数（）{
drawImage（基本图像，0,0）；
}
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
使_基（）；
canvas.addEventListener（'mousemove'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
var message='鼠标位置：'+mousePos.x+'，'+mousePos.y；
writeMessage（画布、消息）；
}，假）

问题是，每次在绘制文本（消息）之前，您都要清除整个画布，这也会清除图像

要解决此问题，您需要在清除画布后和绘制文本之前重新绘制图像



函数writeMessage（画布、消息）{
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；

drawImage（base_image，0，0）；//感谢您的帮助。