canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多。

所以,我们需要使用一个 canvas 的 isPointInPath(x, y) 方法,来获取鼠标相对于浏览器的坐标,然后还需要计算出鼠标相对于 canvas 画布的坐标,最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上,进行相应的操作。

isPointInPath() 方法是针对的当前绘制的路径,而鼠标在执行操作的时候,我们会根据需要监听鼠标的事件,当鼠标事件符合我们要求的时候,就对画布进行重绘。在重绘的时候,每画一条路径就调用一次 isPointInPath(x, y) 方法,判断鼠标操作的点是不是在这个绘制的元素身上,如果在,就可以对当前绘制的这个元素进行自定义操作了。

以下是绘制两个图形,并监听 mousemove 事件,来判断鼠标是否在图形上的 demo:

<style type="text/css">
*{margin:0;padding:0;}
.canvas-box {position: relative;}
canvas {box-shadow: 0 0 10px rgba(0,0,0,0.2) }
</style> <div class="canvas-box">
<canvas id="cvs" width="500" height="400">不支持canvas</canvas>
</div> <script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// 封装绘制的图形
function draw () {
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.moveTo(100,100);
ctx.bezierCurveTo(110,110,199,278,300,379);
ctx.lineTo(400,100)
ctx.closePath();
}
function circle () {
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(100,200,50,0,Math.PI*2)
ctx.closePath();
}
// 初始化绘制图形
draw();
ctx.fill()
circle();
ctx.fill()
var fns = [draw,circle];
// 监听鼠标事件
cvs.onmousemove = function (e) {
// 得到鼠标的坐标
var x = e.pageX, y =e.pageY;
ctx.clearRect(0,0,400,300)
// 遍历绘制图形
for(var i = fns.length; i--;) {
fns[i]();
// 每绘制一个图形就判断一次当前鼠标的坐标是否在这个图形上,然后进行自定义操作
if(ctx.isPointInPath(x,y)) {
ctx.fillStyle = "#f00"
} else {
ctx.fillStyle = "#000"
}
ctx.fill()
}
}
</script>

canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上的更多相关文章

  1. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  2. 在WPF中弹出右键菜单时判断鼠标是否选中该项

      和上篇在WPF的TreeView中实现右键选定一样,这仍然是一个右键菜单的问题: 这个需求是在一个实现剪贴板的功能的时候遇到的:在弹出右键菜单时,如果菜单弹出位置在ListViewItem中时,我 ...

  3. canvas获取鼠标位置

    canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. canvas绘图——根据鼠标位置进行缩放的实现原理

    以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1.然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放 ...

  5. 61.H5---利用canvas+原生js进行鼠标跟随绘图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  7. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  8. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. js判断鼠标进入以及离开容器的方向

      (注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题      如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...

随机推荐

  1. lodash 学习资料

    lodash.js 是什么不多说,工作时间长了就基本绕不过去他,工作项目中也很好的弥补angular ,jquery 的不足,由中文bootstrap 退出的中文版学习资料 http://lodash ...

  2. JSP页面间的传值方法总结

    JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧.试着将各种方式总结下来,需要时可以进行权衡利弊选择最合适的方式.下面来一起看看详细的介绍: 1. URL 链接后追加参数 ? 1 ...

  3. Saiku的下载与安装(一)

    Saiku- 数据可视化的工具,连接数据源展示数据,并且可方便导出xls/csv/pdf等文件的工具 一.Saiku下载 社区网址:https://community.meteorite.bi/ 二. ...

  4. Java小程序分析

    public class Helloworld { public static void main(String[] args) { System.out.println("hello wo ...

  5. VSTO:使用C#开发Excel、Word【9】

    文件背后的代码VSTO支持文档背后的代码,要求开发人员使用VSTO项目中生成的具有预连接上下文和预连接事件的类.这些类有时被称为“代码后面”类,因为它们是与特定文档或工作表相关联的代码.在Word中, ...

  6. FFT理解

     *连续时间-周期性信号频谱 clc;clear;close all N = input('N= '); T = 0.05; n = 1:N; %原始数据输入 D = 2*pi/(N*T); %计算分 ...

  7. Linux文件系统命令 mkdir/rmdir

    命令名:mkdir 功能:创建一个文件夹,和touch的区别是,touch是创建一个文件,后面可以跟绝对路径和相对路径 eg: mkdir ren 命令名:rmdir 功能:删除一个文件夹

  8. 2017-2018-2 20165214 实验四《Android开发基础》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:朱文远 学号:20165214 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:15:35 - 17:15 实验序号:四 ...

  9. synchronized(一)

    /** * 线程安全概念:当多个线程访问某一个类(对象或方法)时,这个对象始终都能表现出正确的行为,那么这个类(对象或方法)就是线程安全的. * synchronized:可以在任意对象及方法上加锁, ...

  10. microsoft office如何在菜单里显示“开发工具”

    VBA开发教程: https://www.yiibai.com/vba/vba_excel_macros.html msdn:https://docs.microsoft.com/zh-cn/offi ...