- 浏览: 592942 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
青春依旧:
html5教学哪家强!当然要上华清远见!
深入理解浏览器兼容性模式 -
ashur:
真机智,看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove:
连线如何删除啊
基于html5 的拖拽连线 -
FakLove:
连线可以再删除吗?
基于html5 的拖拽连线
了解canvas这个标签后,会发现在一个canvas类似一个img图片,在canvas中绘制的图形都是一个整体,所有的事件也都是发生在这一个标签上,没有办法直接判断事件是发生在canvas中的某个图形上。但是通过canvas中的路径的概念可以解决这个问题。
关键:通过路径来绘制图形,用每一个图形是一个路径,事件绑定在canvas标签上,获得事件的发生的x,y坐标。再通过
isPointInPath(),来判断点(x,y)是否在路径内,需要注意的是isPointInPath()只对当前路径(currentPath)
有效,并且经测试发现,只对当前路径的第一个子路径有效(subPath,一个currentPath可以有多个subPath)。关于路径的详细解释可
以看看canvas的api文档。
具体的判断就是,当事件触发时,对canvas中的内容进行重绘,每重回一个路径中的图形,用 isPointInPath()判断一次,如果在路径内,执行相应的操作。
如下面的例子,可以拖动一个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-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"> var list=[]; var currentC; var _e={}; var cricle = function(x,y,r){ this.x=x; this.y=y; this.r=r; this.isCurrent=false; this.drawC=function(ctx,x,y){ ctx.save(); ctx.beginPath(); ctx.moveTo(this.x,this.y-this.r); ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true); if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) { ctx.fillStyle = '#ff0000'; currentC=this; this.isCurrent=true; }else{ ctx.fillStyle = '#999999'; } ctx.fill(); } } function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); for(var i=0;i<10;i++){ var c=new cricle(20*i,20*i,5*i); c.drawC(ctx); list.push(c); } } } function reDraw(e){ e=e||event; var canvas = document.getElementById('tutorial'); var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; canvas.width = canvas.width; if (canvas.getContext){ var ctx = canvas.getContext('2d'); for(var i=0;i<list.length;i++){ var c=list[i]; c.drawC(ctx,x,y); } } } function show(e){ e=e||event; var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; if(currentC){ currentC.x=parseInt(x+(x-currentC.x)/5); currentC.y=parseInt(y+(y-currentC.y)/5); } _e=e; } window.onload=function(){ var canvas = document.getElementById('tutorial'); draw(); canvas.onmousedown=function(e){ e=e||event; var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; if(currentC) currentC.isCurrent=false; currentC=null; reDraw(e); _e=e; var showTimer=setInterval(function(e){ reDraw(e); },10,_e); canvas.onmousemove=show; document.onmouseup=function(){ if(currentC) currentC.isCurrent=false; currentC=null; canvas.onmousemove=null; clearInterval(showTimer); } } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body style="background:#eeeeee;"> <div style="background:#0f0;width:100px;height:100px;position:absolute;left:100px;top:100px;z-index:1;" onclick="alert(1);"></div> <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas> </body> <script> </script> </html>
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 3028这是三种事件处理的模型 (1)冒泡型事件:事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1:通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因,
2015-06-08 11:56 1959Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1460grunt 不是内部命令!! ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7082URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2491jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5701scroller 插件nanoSc ... -
h5,hybrid 开发中问题汇总
2014-10-17 11:26 8209H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 627Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate,一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8627SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1057新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1238前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1085它们之间有区别吗? 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 789Sizzle引擎--原理与实践(三) 查找的入口对 ...
相关推荐
HTML5 Canvas不直接支持DOM事件,所以我们需要手动绑定和处理鼠标事件。主要关注`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)这三个事件。 ```javascript canvas.addEventListener('...
4. **事件模拟**:模拟用户交互,例如点击、触摸等,让开发者在没有实际用户输入的情况下也能测试canvas的交互逻辑。 5. **代码高亮与编辑**:在源代码中高亮显示与选中canvas元素相关的代码段,并允许直接在浏览器...
3. **交互性**:Canvas标记支持鼠标事件,如点击和悬停,使得用户可以直接与地图上的标记进行交互。这对于构建具有动态反馈的地图应用非常有用。 4. **优化的内存管理**:Canvas-Markers插件在地图移动时,只会重新...
总的来说,"canvas生成画图签名PC移动全兼容版"项目是一个集成了多种前端技术的实例,涵盖了canvas绘图、事件处理、设备适配等多个方面,对于理解和实践HTML5的互动功能有很好的参考价值。开发者可以在此基础上...
在实现这些事件时,需要注意Canvas的事件处理与常规HTML元素不同,因为Canvas本身不支持直接绑定事件到其内部绘制的图形。因此,通常需要通过监听整个Canvas元素的事件,然后根据鼠标位置判断是否在特定图形区域内。...
2. **按需加载**:EC-Canvas支持按需加载图表类型。例如,如果一个页面只使用柱状图和饼图,可以只加载这两种图表的模块,而不需要加载其他不使用的图表模块,节省流量和提高加载速度。 3. **模块化设计**:EC-...
同时,canvas支持各种触摸事件,如`tap`、`touchstart`、`touchmove`等,可以实现与用户的交互。 6. **绘图性能优化**: 由于canvas的频繁绘图可能会消耗大量性能,因此在开发时要注意优化。例如,避免不必要的重...
Canvas可以帮助我们实现这一目标,通过监听事件并在适当的时间应用模糊处理,使得用户与红包的交互更生动有趣。 总结来说,CSS3的`filter`属性为图片和元素提供了简单的模糊效果,而Canvas则提供了更底层的控制,...
为了解决这个问题,可以使用像Fabric.js、Paper.js或Pixi.js这样的Canvas库,它们提供了跨浏览器的兼容性和额外的功能,比如对象管理、事件处理、动画支持等。 "canvas light"可能是指这个压缩包中的内容专注于...
HTML5 `canvas` API还支持更多高级特性,如渐变、阴影、路径动画、图片处理等。例如,我们可以创建线性渐变: ```javascript var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient....
小型轻便的 canvas 图形框架,支持像操作dom一样的 进行canvas编程, 在canvas开发中的对象模型和事件绑定机制拉到了和 dom svg 等开发的同等水平,那么,你还在犹豫什么。 标签:Canvax
【标题】:基于canvas的网页签名组件是一种在HTML5环境下实现的交互式功能,它允许用户在网页上进行签名操作,支持两种模式:毛笔字模式和普通模式。该组件可以方便地集成到各种Web应用中,为用户提供直观且个性化的...
除了基本的绘图操作,Canvas还支持路径绘制、渐变、阴影、文字以及图片滤镜等功能,这些都是DIY图片时可能会用到的。例如,可以创建一个渐变背景: ```javascript var gradient = ctx.createLinearGradient(0, 0, ...
以上就是关于“canvas电子签名,支持保存签名图片”的核心知识点。通过canvas,我们可以实现用户友好的电子签名功能,同时保证数据的安全性和可追溯性。在实际项目中,可以根据需求进一步定制和扩展这些功能,提升...
在横竖屏适配方面,canvas画板工具需要考虑不同屏幕方向下的布局和比例问题,通常会在页面旋转事件触发时,调整canvas的大小和位置,以保持画布的可操作性。 总结起来,canvas画板工具集成了HTML5 canvas的绘图能力...
综上所述,HTML5 canvas绘制流程图涉及的技术包括canvas基本绘图方法、事件监听与处理、图形交互逻辑以及可能的第三方库的使用。通过这些技术,我们可以创建出一个无需Flash且功能丰富的类似Visio的流程图工具,支持...
首先,让我们理解SVG和Canvas的区别。SVG是一种基于XML的矢量图形格式,可以无限缩放而不失真,适合用于图标、复杂的图形设计等。而Canvas是HTML5的一个元素,它提供了一个像素级的画布,可以通过JavaScript进行绘制...
微信小程序的canvas还支持其他高级特性,比如渐变、阴影、路径等,结合这些特性,可以创建出更丰富的文字效果。在实际项目中,为了保持良好的性能,应该注意避免不必要的重绘,合理地管理和更新canvas的状态。 综上...
在触摸屏设备普及的今天,HTML5 canvas也提供了对触摸事件的支持,使得在触屏上进行签名和涂鸦成为可能。本文将深入探讨如何使用HTML5 canvas创建一个支持触摸屏的签名涂鸦插件。 首先,我们需要了解canvas的基本...
然而,标准的Canvas并不支持缩放功能,这意味着一旦元素被放置,它们的大小和位置通常是固定的。为了实现可缩放的Canvas,我们需要进行一些额外的编程工作。本文将深入探讨如何创建一个可以缩放的Canvas,并提供一个...