canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

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() 判断鼠标位置是否在绘制的元素上的更多相关文章

js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
在WPF中弹出右键菜单时判断鼠标是否选中该项
和上篇在WPF的TreeView中实现右键选定一样,这仍然是一个右键菜单的问题: 这个需求是在一个实现剪贴板的功能的时候遇到的:在弹出右键菜单时,如果菜单弹出位置在ListViewItem中时,我 ...
canvas获取鼠标位置
canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
canvas绘图——根据鼠标位置进行缩放的实现原理
以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1.然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放 ...
61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
JS判断鼠标移入元素的方向
最终效果这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
js判断鼠标进入以及离开容器的方向
(注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题如图当鼠标右箭头位置上下移动的时候下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...

随机推荐

nginx：负载均衡实战（四）nginx+keepalived配置双机热备
1.下载安装下载keepalived地址:http://www.keepalived.org/download.html 解压安装: tar -zxvf keepalived-.tar.gz 安装o ...
flask不定参数的传递。多参数，多次传递
有的时候有一个分类查询,再来一个排序,这就有两个参数要传递多次. 还是不定长度,不定内容的传递. 这个是用request.args来实现: def home(): requests=request.a ...
Python中os与sys模块的区别
os与sys模块的官方解释如下: os: This module provides a portable way of using operating system dependent functio ...
gulp安装和使用
1.全局安装gulp:sudo npm install -g gulp 2.代码根目录:npm install 3.gulp 开始编译(在项目根目录下创建一个名为 gulpfile.js 的文件) 注 ...
List在遍历中删除t元素
法一:使用普通for循环遍历注意: 1.从头开始循环,每次删除后 i 减一. 2.从尾开始循环. public class Main { public static voi ...
word-wrap与break-word属性的区别
共同点 word-wrap:break-word与word-break:break-all都能把长单词强行断句不同点 word-wrap:break-word会首先起一个新行来放置长单词,新的行还是 ...
Linux关闭防火墙步骤
1 先查询防火墙状态 [root@old-09 ~]# /etc/init.d/iptables status Table: filter Chain INPUT (policy ACCEPT) ...
shell脚本实例-脚本批量创建用户
#!/usr/bin/bash read -p "Please input number: " num if [[ ! "$num" =~ ^[0-9]+$ | ...
nodejs .http模块, cheerio模块实现小爬虫.
代码: var http = require("http"); var cheerio = require("cheerio"); var url = 'htt ...
django面试四
Django的优点功能完善.要素齐全:自带大量常用工具和框架(比如分页,auth,权限管理), 适合快速开发企业级网站. 完善的文档:经过十多年的发展和完善,Django有广泛的实践案例和完善的在线 ...

canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

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

随机推荐

热门专题