Note: 本文的逻辑主体参考自:http://www.xyhtml5.com/html5-canvas-event-handler.html,但是由于原文有较多小错误且没有最终代码,本文将之改正,添加了一个实例并添加了最终的实现代码,算作改进版吧。
Note2: 如果你使用的是xp系统,运行本源码出现了问题,请参考:http://bz5811.iteye.com/admin/blogs/1911666
最近做一个项目,需要在页面上画一个小人,然后点击小人的不同部分响应不同的位置。例如,点击左腿,显示“点击的是左腿”,点击右腿,显示“点击的是右腿”。因为项目使用的HTML5,所以理所应当的想到了用canvas来画这个小人,但是发现canvas对象是作为一个整体存在的。也就是说,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。这样,如果想点击小人的左腿,是点击不到的,你点击的是canvas的整个对象。
给Canvas元素绑定事件
”由于事件只能达到Canvas元素这一层,所以,如果想进一步深入,识别点击发生在Canvas内部的哪一个图形上,就需要增加代码来进行处理。基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。例如一个矩形,该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里,就可以视为点击了该矩形,也就可以手动触发矩形需要处理的点击事件。思路其实比较简单,但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率,有些地方还需要重新判断事件类型,设置要重新定义一个Canvas内部的捕获和冒泡机制。”
首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:
canvas = document.getElementById('myCanvas'); canvas .addEventListener('click', function(e){ //当click时运行 }, false);
接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:
function getEventPosition(ev){ var x, y; if (ev.layerX || ev.layerX == 0) { x = ev.layerX; y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera x = ev.offsetX; y = ev.offsetY; } return {x: x, y: y}; }
现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标,比如:
canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(10, 10, 100, 100); ctx.fill(); ctx.isPointInPath(50, 50); //true ctx.isPointInPath(5, 5); //false
接下来增加一个事件判断,就可以判断一个点击事件是否发生在矩形上:
canvas.addEventListener('click', function(e){ p = getEventPosition(e); if(ctx.isPointInPath(p.x, p.y)){ //点击了矩形 } }, false);
以上就是处理Canvas事件的基本方法,但是上面的代码还有局限,由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件。例如,如果我们最后画的是右腿,那么我们只能判断是否点击了右腿,而不能判断身体的其他部分——右腿最后画。这种问题的解决方法是:当点击事件发生时,重绘所有图形,每绘制一个就使用isPointInPath方法,判断事件坐标是否在该图形覆盖范围内。
为了实现重绘,先画一个小人,然后当点击的时候再重绘小人,每次画一个部分的时候就检查是否点击了此部分,如果点击了,那么将相应的序号保存起来。以下是整个小人的代码。
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo</title> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <![endif]--> <script> //初始时画小人 window.onload=function() { var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); //画左边头 ctx.fillStyle='#1c94c4'; ctx.beginPath(); ctx.arc(105,75,35,Math.PI/2,Math.PI*1.5,false); ctx.fill(); //画右边头 ctx.beginPath(); ctx.arc(110,75,35,Math.PI*1.5,Math.PI/2,false); ctx.fill(); //画躯干 ctx.beginPath(); ctx.rect(80,120,55,100); ctx.fill(); //画左臂 ctx.beginPath(); ctx.rect(25,140,50,20); ctx.fill(); //画右臂 ctx.beginPath(); ctx.rect(140,140,50,20); ctx.fill(); //画左腿 ctx.beginPath(); ctx.rect(80,225,20,80); ctx.fill(); //画右腿 ctx.beginPath(); ctx.rect(115,225,20,80); ctx.fill(); //添加事件响应 canvas.addEventListener('click', function(e){ p = getEventPosition(e); reDraw(p,ctx); }, false); } } //得到点击的坐标 function getEventPosition(ev){ var x, y; if (ev.layerX || ev.layerX == 0) { x = ev.layerX; y = ev.layerY; }else if (ev.offsetX || ev.offsetX == 0) { // Opera x = ev.offsetX; y = ev.offsetY; } return {x: x, y: y}; } //重绘 function reDraw(p,ctx){ arr = [ {x:105, y:75, width:Math.PI/2, height:Math.PI*1.5}, {x:110, y:75, width:Math.PI*1.5, height:Math.PI/2}, {x:80, y:120, width:55, height:100}, {x:25, y:140, width:50, height:20}, {x:140, y:140, width:50, height:20}, {x:80, y:225, width:20, height:80}, {x:115, y:225, width:20, height:80} ] //保存序号的数组,这样,即使一次点多个,也能保存——本例中只能每次点一个 var whichObject = []; for(var i=0; i < arr.length; i++){ //用圆画头 if(i<2){ ctx.fillStyle='#1c94c4'; ctx.beginPath(); ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false); ctx.fill(); if(p && ctx.isPointInPath(p.x, p.y)){ whichObject.push(i); //修改点中区域的颜色 ctx.fillStyle='#F39814'; ctx.beginPath(); ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false); ctx.fill(); } //用矩形画躯干 }else{ ctx.fillStyle='#1c94c4'; ctx.beginPath(); ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height); ctx.fill(); if(p && ctx.isPointInPath(p.x, p.y)){ whichObject.push(i); ctx.fillStyle='#F39814'; ctx.beginPath(); ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height); ctx.fill(); } } } //显示点击了哪个部分 //alert("click:" + whichObject[0]); } </script> </head> <body> <div style="margin-left:30px;"> <canvas id="myCanvas" width="600" height="500" style="border: 5px blue solid"></canvas> <br /><br /> </div> </body> </html>
另:推荐几个快速学习canvas的网址:
Canvas教程:https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
使用html5 canvas绘制精美图形:http://www.ibm.com/developerworks/cn/web/wa-html5canvas/
Canvas图形事件的另一个实例:http://bbs.blueidea.com/thread-2979405-1-1.html
相关推荐
在这个场景中,我们关注的是如何利用Canvas实现一个雷达图,并且为雷达图的内部元素添加click、mousemove和mouseout事件,增强用户交互体验。 首先,创建雷达图的基本步骤包括: 1. 获取Canvas元素:通过`document...
- Canvas元素是HTML5新增的,通过JavaScript来绘制2D图形。 - 绘图API包括各种线条、形状、路径、图像处理、文字和渐变等方法。 - `getContext('2d')`获取2D渲染上下文,这是进行绘图操作的关键。 2. **Canvas...
总之,这个实例展示了HTML5 Canvas结合JavaScript在网页上实现互动动画的基本流程,包括图形的绘制、动画的更新以及用户输入的响应。这对于学习HTML5 Canvas技术和游戏开发来说是一个很好的起点,可以帮助开发者理解...
综上所述,这个"HTML5 Canvas波浪分割线特效"涉及到HTML5 Canvas的基础使用、动态图形绘制、动画原理、交互设计以及响应式布局等多个方面的技术,是网页开发中一个有趣的实践案例。通过学习和理解这个代码,开发者...
总的来说,"HTML5 Canvas疯狂气泡动画特效"充分展示了Canvas的动态绘图能力,结合JavaScript的事件处理和动画机制,创造出了一个生动有趣的交互式页面元素。学习和掌握这些技术,对于提升前端开发者的技能水平,尤其...
它通过读取DOM结构,然后将HTML元素渲染到一个虚拟的Canvas元素上,这个过程就像是浏览器内部的一个“截图”。由于Canvas支持像素级别的操作,因此可以捕获网页的高清内容。对于高DPI(如Retina)屏幕,...
HTML5 Canvas条形码生成代码是利用HTML5的Canvas元素结合JavaScript实现的一种技术,它能够帮助开发者在网页上动态创建并展示条形码。Canvas是HTML5中的一个核心特性,提供了一个二维图形画布,允许通过JavaScript...
EaselJS是一个强大的JavaScript库,专门设计用于简化HTML5 Canvas元素的使用,为开发者提供了一个高效且功能丰富的工具集,以便在2D环境中构建复杂的交互式应用和视觉效果。这个库的目标是消除Canvas API的复杂性,...
HTML5的canvas元素是网页开发中的一个强大工具,它允许开发者在网页上动态绘制图形,包括复杂的2D图像。在这个“HTML5 canvas网页二维码生成器”项目中,我们可以看到如何利用canvas来创建自定义的二维码,同时支持...
例如,`<header>`、`<footer>`、`<nav>`等新元素提供了更好的文档结构,`<canvas>`元素支持动态图形绘制,`<video>`和`<audio>`元素则允许在网页内直接播放多媒体内容。此外,离线存储(离线存储API)和拖放功能...
这一点非常重要,因为SVG元素可以独立响应鼠标事件,如click、mouseover、mouseout等,而Canvas则必须依赖于Canvas本身进行事件捕获。 4. 在移动设备,特别是iPad上,可能需要确保SVG元素的点击事件正确地添加。有...
1. **Canvas元素**:HTML5中的`<canvas>`标签是图形的画布,通过JavaScript的`canvas.getContext('2d')`方法获取2D渲染上下文,从而进行绘图操作。 2. **绘图路径**:在Canvas上绘制图形时,通常需要先定义一个路径...
在HTML中,我们通常可以轻松地为各种元素(如按钮、输入框等)添加事件监听器来响应用户的交互行为。然而,当涉及到`<canvas>`元素时,情况变得复杂起来。这是因为通过`<canvas>`创建的任何图形或图像都并非独立的...
总的来说,"canvas实现放大镜"涉及到HTML5 canvas的基础操作、图像处理、鼠标事件监听和响应,以及一定的CSS样式应用。通过学习和实践这一功能,开发者不仅可以提升对canvas的理解,还能为用户提供更丰富的交互体验...
在这个源码中,可能包含了使用HTML5新特性的元素标记,以及Bootstrap的CSS和JavaScript代码,用于实现响应式布局和交互效果。例如,可能使用了媒体查询(Media Queries)来定义不同屏幕尺寸下的样式,以达到在不同...
在本项目"HTML5+Canvas实现随风飘摇摆动的图片特效源码.zip"中,重点是利用HTML5的Canvas元素来创建一个动态的、图像随风摆动的效果。Canvas是一个基于矢量图形的画布,通过JavaScript可以进行实时的图形绘制和动画...
这个插件充分利用了HTML5的canvas元素,通过纯JavaScript实现,无需CSS代码或任何外部依赖,从而确保了轻量级和高效的性能。 首先,我们要理解canvas在网页开发中的作用。HTML5的canvas是一个矩形区域,允许开发者...
在H5技术中,Canvas是HTML5的一个重要组成部分,它提供了在网页上绘制图形的能力,类似于一个画布。"H5 Canvas多层波浪矢量动画.zip"这个资源可能包含了一个利用Canvas元素创建的、具有多层波浪效果的矢量动画示例。...
在网页设计中,H5 Canvas元素是一个强大的工具,它允许开发者直接在浏览器上进行图形绘制,从而实现各种复杂的动画效果。"H5 Canvas彩色丝带动画特效"是利用Canvas API来创建的一种动态视觉表现,通常用于提升用户...
在`Canvas.vue`内部,我们将定义`<canvas>`标签,并通过JavaScript来操作其上下文(`canvas.getContext('2d')`),实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”,这通常意味着...