`
zha_zi
  • 浏览: 592476 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

让canvas 支持事件

阅读更多

了解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>
 
分享到:
评论

相关推荐

    html5 canvas图形事件实例之拖拽

    HTML5 Canvas不直接支持DOM事件,所以我们需要手动绑定和处理鼠标事件。主要关注`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)这三个事件。 ```javascript canvas.addEventListener('...

    ecdevtools是支持canvas库的chrome调试工具

    4. **事件模拟**:模拟用户交互,例如点击、触摸等,让开发者在没有实际用户输入的情况下也能测试canvas的交互逻辑。 5. **代码高亮与编辑**:在源代码中高亮显示与选中canvas元素相关的代码段,并允许直接在浏览器...

    Leaflet.Canvas-Markers-0.2.0

    3. **交互性**:Canvas标记支持鼠标事件,如点击和悬停,使得用户可以直接与地图上的标记进行交互。这对于构建具有动态反馈的地图应用非常有用。 4. **优化的内存管理**:Canvas-Markers插件在地图移动时,只会重新...

    canvas生成画图签名PC移动全兼容版

    总的来说,"canvas生成画图签名PC移动全兼容版"项目是一个集成了多种前端技术的实例,涵盖了canvas绘图、事件处理、设备适配等多个方面,对于理解和实践HTML5的互动功能有很好的参考价值。开发者可以在此基础上...

    html5 canvas 画雷达图. 实现内部元素的click,mousemove,mouseout事件.

    在实现这些事件时,需要注意Canvas的事件处理与常规HTML元素不同,因为Canvas本身不支持直接绑定事件到其内部绘制的图形。因此,通常需要通过监听整个Canvas元素的事件,然后根据鼠标位置判断是否在特定图形区域内。...

    ec-canvas动态加载

    2. **按需加载**:EC-Canvas支持按需加载图表类型。例如,如果一个页面只使用柱状图和饼图,可以只加载这两种图表的模块,而不需要加载其他不使用的图表模块,节省流量和提高加载速度。 3. **模块化设计**:EC-...

    小程序canvasDemo

    同时,canvas支持各种触摸事件,如`tap`、`touchstart`、`touchmove`等,可以实现与用户的交互。 6. **绘图性能优化**: 由于canvas的频繁绘图可能会消耗大量性能,因此在开发时要注意优化。例如,避免不必要的重...

    canvas实现模糊效果

    Canvas可以帮助我们实现这一目标,通过监听事件并在适当的时间应用模糊处理,使得用户与红包的交互更生动有趣。 总结来说,CSS3的`filter`属性为图片和元素提供了简单的模糊效果,而Canvas则提供了更底层的控制,...

    canvas light.rar

    为了解决这个问题,可以使用像Fabric.js、Paper.js或Pixi.js这样的Canvas库,它们提供了跨浏览器的兼容性和额外的功能,比如对象管理、事件处理、动画支持等。 "canvas light"可能是指这个压缩包中的内容专注于...

    canvas定义画图板

    HTML5 `canvas` API还支持更多高级特性,如渐变、阴影、路径动画、图片处理等。例如,我们可以创建线性渐变: ```javascript var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient....

    Canvas图形框架Canvax.zip

    小型轻便的 canvas 图形框架,支持像操作dom一样的 进行canvas编程, 在canvas开发中的对象模型和事件绑定机制拉到了和 dom svg 等开发的同等水平,那么,你还在犹豫什么。 标签:Canvax

    canvas生成DIY图片

    除了基本的绘图操作,Canvas还支持路径绘制、渐变、阴影、文字以及图片滤镜等功能,这些都是DIY图片时可能会用到的。例如,可以创建一个渐变背景: ```javascript var gradient = ctx.createLinearGradient(0, 0, ...

    canvas电子签名,支持保存签名图片

    以上就是关于“canvas电子签名,支持保存签名图片”的核心知识点。通过canvas,我们可以实现用户友好的电子签名功能,同时保证数据的安全性和可追溯性。在实际项目中,可以根据需求进一步定制和扩展这些功能,提升...

    基于canvas 的网页签名组件,支持毛笔字模式和普通模式,或导出图片.zip

    【标题】:基于canvas的网页签名组件是一种在HTML5环境下实现的交互式功能,它允许用户在网页上进行签名操作,支持两种模式:毛笔字模式和普通模式。该组件可以方便地集成到各种Web应用中,为用户提供直观且个性化的...

    canvas画板工具 uni-modules、画板、canvas、签名、电子签名、简约风、万能、免费、支持横竖屏

    在横竖屏适配方面,canvas画板工具需要考虑不同屏幕方向下的布局和比例问题,通常会在页面旋转事件触发时,调整canvas的大小和位置,以保持画布的可操作性。 总结起来,canvas画板工具集成了HTML5 canvas的绘图能力...

    HTML5 canvas绘制流程图

    综上所述,HTML5 canvas绘制流程图涉及的技术包括canvas基本绘图方法、事件监听与处理、图形交互逻辑以及可能的第三方库的使用。通过这些技术,我们可以创建出一个无需Flash且功能丰富的类似Visio的流程图工具,支持...

    将svg画布内容转成canvas,转换成png图片下载

    首先,让我们理解SVG和Canvas的区别。SVG是一种基于XML的矢量图形格式,可以无限缩放而不失真,适合用于图标、复杂的图形设计等。而Canvas是HTML5的一个元素,它提供了一个像素级的画布,可以通过JavaScript进行绘制...

    微信小程序canvas实现文字缩放

    微信小程序的canvas还支持其他高级特性,比如渐变、阴影、路径等,结合这些特性,可以创建出更丰富的文字效果。在实际项目中,为了保持良好的性能,应该注意避免不必要的重绘,合理地管理和更新canvas的状态。 综上...

    HTML5 canvas支持触摸屏的签名涂鸦插件

    在触摸屏设备普及的今天,HTML5 canvas也提供了对触摸事件的支持,使得在触屏上进行签名和涂鸦成为可能。本文将深入探讨如何使用HTML5 canvas创建一个支持触摸屏的签名涂鸦插件。 首先,我们需要了解canvas的基本...

    wpf 可缩放的canvas

    然而,标准的Canvas并不支持缩放功能,这意味着一旦元素被放置,它们的大小和位置通常是固定的。为了实现可缩放的Canvas,我们需要进行一些额外的编程工作。本文将深入探讨如何创建一个可以缩放的Canvas,并提供一个...

Global site tag (gtag.js) - Google Analytics