项目需要增加一个功能:当鼠标滑过canvas时,左下角实时显示矿图的实际坐标。如图所示:


鼠标事件

  • 在canvas中检测鼠标事件是非常简单的:可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器。要监听“按下鼠标事件”,可以这么做:canvas.onmousedown=function(e){//….},此外,可以使用更通用的addEventListener()方法来注册监听器:canvas.addEventListener(‘mousedown’,function(e){//…}), 同样也可用onmousemove,onmouseup,onmouseout来注册监听器。
  • 使用onmousemove,onmouseup这样的方式来注册监听器,比调用addEventListener()要简单些,不过,如果要向某个鼠标事件注册许多个监听器的话,那么就得使用addEventListener()方法了。

鼠标坐标转换为Canvas坐标

  • 浏览器通过事件对象传递给监听器的鼠标坐标,是窗口坐标,而不是相对于Canvas的自身的坐标。
  • 我们需要知道的是鼠标事件点相对于Canvas的位置,而不是整个窗口的位置,所以必须进行坐标转换。
  • 我们看到代码也非常的简单,在windowToCanvas()方法中调用getBoundingClientRect()方法,获取canvas元素的边界框,该边界框也是相对于整个窗口的。e.clientX,e.clientY是鼠标事件发生时的窗口坐标,目前所有支持HTML5的浏览器都支持clientX和clientY属性。
  • 注意:windowToCanvas()方法不只是将canvas边界框的x,y坐标从窗口坐标中减去,而且在canvas元素大小与绘图表面大小不相符时,它还对这俩坐标进行了缩放。下面我们说一下canvas元素大小与绘图表面大小

canvas元素大小与绘图表面大小

  • 我们首先看一下在canvas内部设置width和height,然后绘制一个圆。代码:

  • 效果图如下:
  • 我们再通过CSS设置canvas的width和height,同样绘制一个圆,看看结果是怎样的。代码:

  • 效果图如下:
  • 好神奇,我们竟然画出来一个椭圆,同样都是设置canvas的width和height,结果却不一样,这是为什么呢?
  • 实际上canvas元素有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面的大小,当在内部设置元素的width和height属性时,同时修改了本身的大小与元素绘图表面的大小。然而,如果是通过CSS来设定canvas元素的大小,那么只会改变元素本身的大小,不会影响到绘图表面。默认情况下,canvas元素与其绘图表面,都是300像素宽,150像素高。当通过CSS设置为200像素和200像素时,绘图表面并没有改变,还是默认的300X150像素。但有趣的事情发生了,浏览器会对绘图表面进行缩放,使其符合元素的大小,导致形成了不是我们想要的”椭圆”。