canvas之事件交互效果isPointPath
isPointInPath() 用来检测某个点是否在当前路径中,常用来做点击交互等。
需要注意的是,每次执行一次beginPath方法,检测路径就变成这次beginPath之后绘制的路径,原来的路径不参与检测。
例如实现点击下面的圆,颜色变成蓝色。
我们需要实现的是鼠标点击当前位置是否在我绘制的圆圈的路径内,而每个圆都是一个新的路径,而isPointPath检测的是当前的路径,也就是说我们需要在点击的过程中重新画圆的路径,每画一个圆就检测鼠标点击的点是否在当前的圆的路径中。-- 当点击鼠标时遍历小球的数组画圆,并检测点是否在当前路径上。
代码实现如下
var balls = [];
var canvas = document.getElementById('canvas');
canvas.onclick = function(e){
//获取基于画布的位置
var x = e.clientX - canvas.getBoundingClientRect().left; //getBoundingClientRect是获取元素相对于文档的位置
var y = e.clientY - canvas.getBoundingClientRect().top; //getBoundingClientRect是获取元素相对于文档的位置
for(var i = 0 ; i < balls.length; i++ ){
context.beginPath();
context.arc(balls[i].x, balls[i].y, balls[i].radius, Math.PI * 0, Math.PI * 2, 0);
if(context.isPointInPath(x, y)){
context.fillStyle='#058';
context.fill();
}
}
context.isPointInPath(x, y);
}
if (canvas.getContext) {
canvas.width = 1200;
canvas.height = 800;
var context = canvas.getContext('2d'); for (var i = 0; i < 20; i++) {
var radius = Math.random() * 50 + 20;
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
var obj = {
radius: radius,
x: Math.random() * (canvas.width - 2 * radius) + radius,
y: Math.random() * (canvas.height - 2 * radius) + radius,
color: 'rgb(' + R + "," + G + "," + B + ')'
}
balls[i] = obj;
}
draw(context); }
function draw(context) {
// context.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < balls.length; i++) {
context.beginPath();
context.fillStyle = balls[i].color;
context.arc(balls[i].x, balls[i].y, balls[i].radius, Math.PI * 0, Math.PI * 2, 0);
context.closePath();
context.fill();
} }
地方
canvas之事件交互效果isPointPath的更多相关文章
- (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于 HTML5 Canvas 的可交互旋钮组件
前言 此次的 Demo 效果如下: Demo 链接:https://hightopo.com/demo/comp-knob/ 整体思路 组件参数 绘制旋钮 绘制刻度 绘制指针 绘制标尺 绘制文本 1. ...
- 多功能前台交互效果插件superSlide
平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...
- NGUI---使用脚本控制聊天系统的内容显示,输入事件交互
在我的笔记Unity3D里面之 简单聊天系统一 里面已经介绍怎么创建聊天系统的背景.给聊天系统添加滚动条,设置Anchor锚点.以及设计聊天系统的输入框. 效果图如下所示: 现在我们要做的就是使用脚本 ...
- C#微信公众号开发--微信事件交互
前言 一切准备工作就绪时就先实现一个关注公众号后向客户端推送一条消息.关注后推送消息需要一个get请求.一个post请求,get请求主要是为了向微信服务器验证,post请求主要就是处理微信消息了. 调 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- Axure教程:滑动进度条、圆形进度环的复杂交互效果实现方法
滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...
- Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...
随机推荐
- python 多线程编程之进程和线程基础概念
多线程编程 在多线程(multithreaded,MT)出现之前,计算机程序的执行都是由单个步骤序列组成的,该序列组合在主机的CPU中按照同步顺序执行.无论是任务本身需要按照步骤顺序执行,还是整个过程 ...
- c++-纯虚函数和抽象类
纯虚函数和抽象类 C面向接口编程和C多态 函数类型语法基础 函数指针做函数参数(回调函数)思想剖析 函数指针做函数参数两种用法(正向调用.反向调用) 纯虚函数 抽象类 抽象类基本概念 抽象类在多继承中 ...
- String 的 intern() 方法解析
一.概述 JDK7 之前和之后的版本,String 的 intern() 方法在实现上存在差异,本文的说明环境是 JDK8,会在文末说明 intern() 方法的版本差异性. intern() 方法是 ...
- ps -ef |grep -v 在shell sh 脚本中貌似无效?
想通过ps -ef |grep erdp_ |awk '{print $2}' 获取 erdp_ 开头的进程id, 执行在终端环境下执行是ok的,但是在 sh 脚本里面竟然多出了 两个 root 11 ...
- WinForm 无边框窗体改变尺寸及移动窗体
#region 无边框窗体移动改变大小 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); ...
- VScode - 10个提高工作效率的快捷键
复制行 shift + alt + up / down 移动行 alt + up / down 多选 按住alt + 鼠标单击 删除上个单词 ctrl + Backspace 全部保存 ctrl + ...
- Viewpager+Fragment 跳转Activity报错android.os.TransactionTooLargeException: data parcel size xxxxx bytes
Viewpager + Fragment 跳转Activity报错android.os.TransactionTooLargeException: data parcel size xxxxx byt ...
- mysql与oracle的语法对比
数据类型 编号 ORACLE MYSQL 注释 1 NUMBER int / DECIMAL DECIMAL就是NUMBER(10,2)这样的结构INT就是是NUMBER(10),表示整型:MYSQL ...
- JavaScript banner轮播 左右切换 圆点点击切换
1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- linux添加磁盘分区做为swap分区
在部署oracle时,根据内存的不同,会对swap分区大小有不同要求,具体参考https://www.cnblogs.com/chxmtl/p/11672053.html 下面为具体操作步骤. 1.新 ...