canvas事件处理机制
可以查看demo:http://sandbox.runjs.cn/show/hjb2hzzx(建议查看console查看点击后的改变)
具体原理是每次点击的时候去判断当前的鼠标坐标是属于哪一个路径下的,对当前的这个形状改变状态。
for (var i = 0; i < drawData.length; i++) {
drawSingleCircle(i);
if (ctx.isPointInPath(x, y)) {
changeStatus(i);
}
}
参考:http://www.imooc.com/video/4320/227
关键代码:
(function(window) {
var document = window.document;
var clientW = window.innerWidth;
var clientH = window.innerHeight; var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); canvas.width = clientW;
canvas.height = clientH; var drawData = []; // 存数据 // 添加数据
function addData() {
for (var i = 0; i < 10; i++) {
var data = {
id: i,
type: 'arc',
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 50 + 20
};
drawData.push(data);
}
} // 画圆
function drawCircle() {
addData();
ctx.clearRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < drawData.length; i++) {
drawSingleCircle(i);
}
}
drawCircle(); // 画单个圆
function drawSingleCircle(i){
ctx.beginPath();
ctx.arc(drawData[i].x, drawData[i].y, drawData[i].radius, 0, Math.PI * 2, true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.closePath();
} // 重新绘制(点击事件中需要用到)
function reDraw(x, y) {
ctx.clearRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < drawData.length; i++) {
drawSingleCircle(i);
if (ctx.isPointInPath(x, y)) {
changeStatus(i);
}
}
} // 如果在事件触发的范围内,可以做一些事情来改变状态
function changeStatus(i){
ctx.fillStyle = "#f00";
ctx.fill();
console.log(drawData[i].type);
console.log('你点击了第' + i + '个');
} // 点击事件处理函数
function onClick(event) {
var e = event || window.event;
var x = e.clientX - canvas.getBoundingClientRect().left;
var y = e.clientY - canvas.getBoundingClientRect().top;
reDraw(x, y);
} // 注册点击事件
canvas.addEventListener('click',onClick,false);
})(window);
canvas事件处理机制的更多相关文章
- java 事件处理机制:按下上下左右键控制小球的运动
/** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...
- Android事件处理机制
包括监听和回调两种机制. 1. 基于监听的事件处理: 事件监听包含三类对象,事件源,事件,事件监听器.Android的事件处理机制是一种委派式(Delegation)事件处理方式:普通组件(事件源)将 ...
- Android的两种事件处理机制
UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和基于监听器的事件处理. 对于基于监听器的事件处理而言,主要就是为Android界面组件绑定特定的事 ...
- Android的Touch事件处理机制
Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后. Android的Touch事件处理分3个层面:Activity层,ViewGroup层,View层. 首先说一 ...
- IOS事件处理机制(关于触发者和响应者的确认)
事件处理机制 在iOS中发生触摸后,事件会加入到UIApplication事件队列(在这个系列关于iOS开发的第一篇文章中我们分析iOS程序原理的时候就说过程序运行后UIApplication会循环监 ...
- Java Swing事件处理机制
Java Swing的事件处理机制 Swing GUI启动后,Java虚拟机就启动三个线程,分别为主线程,事件派发线程(也是事件处理线程)和系统工具包线程. 主线程 :负责创建并显示该程序的初始界面: ...
- Qt事件处理机制
研一的时候开始使用Qt,感觉用Qt开发图形界面比MFC的一套框架来方便的多.后来由于项目的需要,也没有再接触Qt了.现在要重新拾起来,于是要从基础学起. Now,开始学习Qt事件处理机制. 先给出原文 ...
- core java 8~9(GUI & AWT事件处理机制)
MODULE 8 GUIs--------------------------------GUI中的包: java.awt.*; javax.swing.*; java.awt.event.*; 要求 ...
- Android的事件处理机制详解(二)-----基于监听的事件处理机制
基于监听的事件处理机制 前言: 我们开发的app更多的时候是需要与用户的交互----即对用户的操作进行响应 这就涉及到了android的事件处理机制; android给我们提供了两套功能强大的处理机制 ...
随机推荐
- link与@import的区别
我们都知道link与@import都可以引入css样式表,那么这两种的区别是什么呢?先说说它们各自的链接方式,然后说说它们的区别~~~ link链入的方式: <link rel="st ...
- asp.net mvc 中 一种简单的 URL 重写
asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...
- iOS PresentViewControlle后,直接返回根视图
在开发中:用[self presentViewController:VC animated:YES completion:nil];实现跳转,多次跳转后,直接返回第一个. 例如: A presentV ...
- SharePoint 2013 搭建app本地开发环境
使用SharePoint App,如果要通过应用程序目录分发 SharePoint 相关应用程序,如具有完全控制权限的 SharePoint 相关应用程序(无法部署到 Office 365 网站),则 ...
- iOS项目groups和folder的区别(组和文件夹)
在引用一个第三方框架的时候,已经拖进去了,但是引用框架里面的文件时,竟然报错说找不到.......查了一下,原来在拖进去时没有注意group和folder的选择! 其实仔细观察一下,不难发现,以gro ...
- Android 一个对sharedpreferences 数据进行加密的开源库
1.项目地址 https://github.com/iamMehedi/Secured-Preference-Store 2.使用方法 2.1.存数据 //存数据 SecuredPreferenceS ...
- Android数据存储方式--SharedPreferences
Android数据存储方式有如下四种:SharedPreferences.存储到文件.SQLite数据库.内容提供者(Content provider).存储到网络服务器. 本文主要介绍一下Share ...
- Python魔术方法-Magic Method
介绍 在Python中,所有以"__"双下划线包起来的方法,都统称为"Magic Method",例如类的初始化方法 __init__ ,Python中所有的魔 ...
- linux中位置参数变量和预定义变量
位置参数变量 预定义变量
- awk-实践
实际中遇到的问题 字符串截取函数 substr #!/usr/bin/awk #author:zhaoyingnan #filename:substr.awk #substr 函数 #|awk -f ...