TAOTAO

导航

canvas 使用示例

终于下决心开始写博客了，发现还不会用博客，有时候自己捣鼓下。

这是第一篇，没啥技术含量，所以也不写啥说明了..

 

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5示例</title>
	<style type="text/css">
		#container{border:1px solid #ccc;width:800px;height:600px;position:relative;}
		canvas{position:absolute;top:0px;left:0px;z-index:1;}
	</style>
</head>
<body>
	<select id="tools">
		<option value="pen">铅笔</option>
		<option value="line">直线</option>
		<option value="rect">矩形</option>
		<option value="circle">圆形</option>
		<option value="ellipse">椭圆</option>
	</select><br />
	<div id="container">
	<canvas id="canvas" width="800" height="600"></canvas>
	<canvas id="canvas_temp" style="z-index:2;" width="800" height="600"></canvas>
	</div>
	<script type="text/javascript">	
	var canvas = document.getElementById('canvas');
	var context  = canvas.getContext('2d');
	
	var _canvas = document.getElementById('canvas_temp');
	var _context  = _canvas.getContext('2d');
	var tools= document.getElementById('tools');
	
	tools.onchange = function (e){		
		tool[this.value]();
	};
	var tool = {
		pen:function (){
			this.reset();
			_canvas.onmousedown=function (e){
				_context.moveTo(e.layerX,e.layerY);
				_canvas.onmousemove=function (e){
					_context.lineTo(e.layerX,e.layerY);
					_context.stroke();
				};
				_canvas.onmouseup=function (e){
					_canvas.onmousemove=null;
					_canvas.onmouseup=null;
					tool.updata();
				};
			};
		},
		line:function (){
			this.reset();
			_canvas.onmousedown=function (e){
				var _e = e;				
				_canvas.onmousemove=function (e){	
					_context.clearRect(0,0,canvas.width,canvas.height);
					_context.beginPath();
					_context.moveTo(_e.layerX,_e.layerY);
					_context.lineTo(e.layerX,e.layerY);
					_context.stroke();
					_context.closePath();
				};	
				_canvas.onmouseup=function (e){
					_canvas.onmousemove=null;
					_canvas.onmouseup=null;
					tool.updata();
				};				
			}		
		},
		rect:function (){
			this.reset();
			_canvas.onmousedown=function (e){
				var _e = e;
				_context.strokeStyle="#000";
				_canvas.onmousemove=function (e){	
					_context.clearRect(0,0,canvas.width,canvas.height);
					_context.strokeRect(_e.layerX,_e.layerY,e.layerX-_e.layerX,e.layerY-_e.layerY);
				};
				_canvas.onmouseup=function (e){
					_canvas.onmousemove=null;
					_canvas.onmouseup=null;
					tool.updata();
				};				
			}	
		},
		circle:function (){
			this.reset();
			_canvas.onmousedown=function (e){
				var _e = e;
				_canvas.onmousemove=function (e){	
					_context.clearRect(0,0,canvas.width,canvas.height);
					_context.beginPath();
					_context.arc(_e.layerX,_e.layerY,e.layerX-_e.layerX,0,Math.PI*2,true);
					_context.stroke();
					_context.closePath();
				};
				_canvas.onmouseup=function (e){
					_canvas.onmousemove=null;
					_canvas.onmouseup=null;
					tool.updata();
				};				
			}	
		},
		ellipse:function (){
			this.reset();
			_canvas.onmousedown=function (e){
				var _e = e;				
				_canvas.onmousemove=function (e){
					var st=0;
					_context.clearRect(0,0,canvas.width,canvas.height);
					_context.beginPath();
					_context.moveTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st), _e.layerY+(e.layerX-_e.layerX)*Math.sin(st));
					st+=1/180*Math.PI;					
					for(var i=0;i<360;i++){
						_context.lineTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st),_e.layerY+(e.layerY-_e.layerY)*Math.sin(st));
						st+=1/180*Math.PI;
					}
					_context.stroke();
					_context.closePath();
				};
				_canvas.onmouseup=function (e){
					_canvas.onmousemove=null;
					_canvas.onmouseup=null;
					tool.updata();
				};				
			}			
		},
		reset:function (){
			_canvas.onmousedown=null;
			_canvas.onmouseup=null;
			_canvas.onmousemove=null;
		},
		updata:function (){	
			context.drawImage(_canvas, 0, 0);
			_context.clearRect(0, 0, canvas.width, canvas.height);
		}
	};
	tool['pen']();	
	</script>
</body>
</html>

posted on 2010-10-20 17:06  TAOTAO.  阅读(318)  评论(0)    收藏  举报