canvas画图

Html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<title>canvas画板</title>
    <meta charset="utf-8">  
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/canvas.js"></script>   	
	<style>
		.board{			
			border:1px solid red;
		}
	</style>	
</head>
<body "InitThis();">
	<canvas class="board" id="myCanvas" width="800px" height="400px"></canvas> 
</body>
</html>

js代码

	var drawingSurfaceImageData = new Image();
	var mousedown = {};
	var rubberbandRect = {};
	var dragging = false;
	
	function InitThis(){
		// 点击canvas当鼠标落下的时候
		$('#myCanvas').mousedown(function(e){
			var loc = windowToCanvas(e.clientX,e.clientY);
			e.preventDefault();
			saveDrawingSurface();
			mousedown.x = loc.x;
			mousedown.y = loc.y;
			dragging = true;
		});

		// 点击canvas当鼠标移动的时候
		$('#myCanvas').mousemove(function(e){
			var loc;
			if(dragging){
				e.preventDefault();
				loc = windowToCanvas(e.clientX,e.clientY);
				restoreDrawingSurface();
				updateRubberband(loc);
			}
		});

		// 点击canvas当鼠标抬起的时候 
		$('#myCanvas').mouseup(function(e){
			loc = windowToCanvas(e.clientX, e.clientY);
			//恢复在mousedown时保存的画布内容,并在此基础上绘制新的图案。
			restoreDrawingSurface();
			//画矩形
			updateRubberband(loc);
			dragging = false;
		});
		
		$('#myCanvas').mouseleave(function(e){
			dragging = false;
		});
	}
		
	// 将windows下的坐标转换为canvas上的坐标
	function windowToCanvas(x,y){
		var canvas = document.getElementById('myCanvas');
		var bbox = document.getElementById('myCanvas').getBoundingClientRect();
		return {
		    x: x - bbox.left * (canvas.width / bbox.width),
		    y: y - bbox.top * (canvas.height / bbox.height)
		};
	}

	// 保存画布上的所有的内容
	function saveDrawingSurface(){
		context = document.getElementById('myCanvas').getContext('2d');
		var canvas = document.getElementById('myCanvas');
		// getImageData() 复制画布上指定矩形的像素数据
		drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
	}

	// 恢复画板上的数据
	function restoreDrawingSurface(){
		context = document.getElementById("myCanvas").getContext('2d');
		// 通过 putImageData() 将图像数据放回画布
		context.putImageData(drawingSurfaceImageData,0,0);
	}

	//判断是画什么形状
	function updateRubberband(loc){
		updateRubberbandRectangle(loc); 
		drawRubberbandShapeRect(loc);           
	}

	//获取矩形的相对位置和矩形的宽高
	function updateRubberbandRectangle(loc){
		//得到所要画的矩形的宽
		rubberbandRect.width = Math.abs(loc.x - mousedown.x);
		//得到所要画的矩形的高
		rubberbandRect.height = Math.abs(loc.y - mousedown.y);

		//得到矩形相对于左上角的坐标
		if(loc.x > mousedown.x){
		    rubberbandRect.left = mousedown.x;
		}else{
		    rubberbandRect.left = loc.x;
		}
		//得到矩形相对于左上角的y轴的坐标
		if(loc.y > mousedown.y){
		    rubberbandRect.top = mousedown.y;
		}else{
		    rubberbandRect.top = loc.y;
		}
	}

	//画矩形
	function drawRubberbandShapeRect(loc){
		context = document.getElementById("myCanvas").getContext('2d');
		context.strokeStyle = 'red';
		context.fillStyle = false;
		context.lineWidth = '2';			
		context.beginPath();
		//context.rect(x,y,width,height);矩形左上角的 x 坐标    矩形左上角的 y 坐标    矩形的宽度,以像素计 矩形的高度,以像素计
		context.rect(rubberbandRect.left,rubberbandRect.top,rubberbandRect.width,rubberbandRect.height);
		//绘制已经定义的图片
		context.stroke();
	}
		
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值