canvas画图

最新推荐文章于 2023-06-09 11:35:33 发布

小纪念

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量126

点赞数

分类专栏：【canvas】文章标签： canvas

本文链接：https://blog.csdn.net/qq_40247975/article/details/88532895

版权

【canvas】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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
评论
canvas画图

Html代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;canvas画板&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script type="text/javascript" sr
复制链接

扫一扫

专栏目录