让canvas 支持事件

最新推荐文章于 2024-03-12 14:13:31 发布

zha_zi

最新推荐文章于 2024-03-12 14:13:31 发布

阅读量1.6k

点赞数

分类专栏： canvas html5

本文链接：https://blog.csdn.net/zha_zi/article/details/41676917

版权

html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

了解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.οnlοad=function(){
		
		var canvas = document.getElementById('tutorial');
		draw();
		
		canvas.οnmοusedοwn=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.οnmοusemοve=show;

			document.οnmοuseup=function(){
				if(currentC)
					currentC.isCurrent=false;
				currentC=null;
				canvas.οnmοusemοve=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;" οnclick="alert(1);"></div>
    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
	
</body>
<script>

</script>
</html>