获取canvas中鼠标的坐标,并绘制图片

2019-04-15 11:22:35

难点在于,cavas可能放大,然后画图的坐标就会改变了,必须也要跟着放大缩小。


// 监听点击事件

canvas.addEventListener("click", function(event) {

    getMousePos(canvas, event);

});


function getMousePos(canvas, event) {

    //1

    var rect = canvas.getBoundingClientRect();

    //2

    var x = (event.clientX - rect.left) * (canvas.width / rect.width);

    var y = (event.clientY - rect.top)* (canvas.height / rect.height);

    console.log("x:"+x+",y:"+y);

}



解析

getBoundingClientRect()

这个方法返回的对象有六个属性,如下表:


属性 描述

top 元素上边界距窗口最上边的距离

left 元素左边界距窗口最左边的距离

bottom 元素下边界距窗口最上边的距离

right 元素右边界距窗口最左边的距离

width 元素的宽度

height 元素的高度

rect.left * (canvas.width / rect.width)

之所以要乘一个(canvas.width / rect.width),是为了保证画布的像素值和显示在页面上的尺寸不一致的情况下,也能够正确获取到鼠标相对于canvas中的坐标。


画布的像素值和显示在页面上的尺寸不一致的情况


<canvas id="canvasId" width="100" height="100" style="width: 500px;height: 500px;"></canvas>


  • 2019-09-28 08:00:30

    Java.io.tmpdir介绍

    System.getproperty(“java.io.tmpdir”)是获取操作系统缓存的临时目录,不同操作系统的缓存临时目录不一样,

  • 2019-09-28 08:36:43

    Ehcache配置持久化到硬盘,只存储到硬盘

    Ehcache默认配置的话 为了提高效率,所以有一部分缓存是在内存中,然后达到配置的内存对象总量,则才根据策略持久化到硬盘中,这里是有一个问题的,假如系统突然中断运行 那内存中的那些缓存,直接被释放掉了,不能持久化到硬盘;这种数据丢失,对于一般项目是不会有影响的,但是对于我们的爬虫系统,我们是用来判断重复Url的,所以数据不能丢失;

  • 2019-09-28 09:33:18

    put与putIfAbsent区别

    put在放入数据时,如果放入数据的key已经存在与Map中,最后放入的数据会覆盖之前存在的数据, 而putIfAbsent在放入数据时,如果存在重复的key,那么putIfAbsent不会放入值。

  • 2019-09-29 10:28:04

    程序员实用工具网站

    程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。