canvas详解10-图形元素交互

简介: canvas详解10-图形元素交互

介绍


isPointInPath()判断路径中是否包含监测点(作为参数传入)。


#isPointInPath()介绍


方法 描述 boolean ctx.isPointInPath(x, y) 判断监测点(x,y)是否在路径内 boolean ctx.isPointInPath(x, y, fillRule) 判断监测点(x,y)和路径的位置关系,通过fillRule来决定是路径内还是路径外。fillRule的可选参数是nonzero(非零环绕算法)和evenadd(奇偶环绕算法)


#使用


如果context.rect(10,10,100,100),那么所有在这个路径内的点都能被isPointInPath(x,y)判断为true,如(50,50);


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10
_揽
+关注
目录
打赏
0
0
1
0
572
分享
相关文章
如何使用 Canvas 实现复杂的动画效果?
【10月更文挑战第24天】使用Canvas实现复杂的动画效果,需要综合运用JavaScript、数学知识以及对Canvas API的深入理解。
158 2
canvas系列教程05 ——交互、动画
canvas系列教程05 ——交互、动画
61 0
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
593 0
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
104 4
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
199 0
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
145 2
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
293 0
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
158 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等