Html5 Canvas Hit Testing

名词解释:


Shape : 矢量图形,点线面之类的;

Hit Testing : 点击测试;

参考内容:

A Gentle
Introduction to Making HTML5 Canvas
Interactive

小记:


在Html5中使用Canvas对象来绘制矢量图形Shape,我们希望对这些Shape对象做更进一步的操作,如选中、拖拽等,那么必然我们需要在Canvas上有一个Hit
Testing ,遗憾的是Canvas并没有提供对内置对象Hit Testing的方法。(W3C.Org正在标准里面增加Hit
Testing的方法!
)

这里我想到的方法是,在UICanvas背后生成一个HittestCanvas对象,两个Canvas对象同时绘制Shape对象,在HittestCanvas中我们为每个Shape对象制作一个颜色编号,当鼠标移入UICanvas中时,我们获取UICanvas中的鼠标位置,然后在HittestCanvas中使用getImageData来获取鼠标位置的颜色,通过颜色编号获取得到的Shape对象,然后在UICanvas中为这个Shape对象加上边框或者全色填充,这样,就完成了Hit
Testing的工作。

注:现在我面临一个问题,当我在一个Canvas中有500+复杂面对象(盆地)时,如果两个Shape对象相切或者相交时,当我从一个Shape对象移入到另一个Shape对象过程中发现颜色编号的变换出现了问题:当鼠标在两个很近的Shape对象的间隙中时,触发了远在他方的第三个Shape对象的高亮事件。写这篇博客的目的就是希望能够记录解决这个问题的点点滴滴,供参考。

Html5 Canvas Hit Testing,布布扣,bubuko.com

时间: 2024-11-09 06:32:52

Html5 Canvas Hit Testing的相关文章

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

html5 canvas首屏自适应背景动画循环效果代码

模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大家积极评论,给出宝贵意见 下 载 演示地址 本文地址:html5 canvas首屏自适应背景动画循环效果代码

前端-HTML5 canvas学习

canvas元素算是HTML5添加的最受欢迎的功能了.它是通过在页面中设定一个区域,然后用脚本来编辑图形. 可像下面这样来引入一个canvas图像 <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('

html5 canvas文本处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示      源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta

HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 画布上的 Three.js 环境灯光HTML5 Canvas Three.js Ambient Lighting <!DOCTY

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个

HTML5 Canvas ( 扩展context(&#39;2d&#39;) ) CanvasRenderingContext2D.prototype.你的方法名

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">