【实例】html5-canvas通过鼠标绘制线段

最新推荐文章于 2024-08-05 16:35:45 发布

_Slience_

最新推荐文章于 2024-08-05 16:35:45 发布

阅读量2.1w

点赞数 3

分类专栏： html5-canvas 文章标签： html5 html css

本文链接：https://blog.csdn.net/u010513756/article/details/47449181

版权

html5-canvas 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: #eeeeee;
			}
			#controls {
				position: absolute;
				left: 25px;
				top: 25px;
			}
			#canvas {
				background: #ffffff;
				cursor: pointer;
				margin-left: 10px;
				margin-top: 10px;
				-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
				-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
				-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="400"></canvas>
		<div id="controls">
			Stroke color:
			<select id="strokeStyleSelect">
				<option value="red">red</option>
				<option value="green">green</option>
				<option value="blue">blue</option>
				<option value="orange">orange</option>
			</select>
			
			Guidewires:
			<input type="checkbox" name="guidewireCheckbox" id="guidewireCheckbox" value=""  checked="checked"/>
			<input type="button" name="eraseAllButton" id="eraseAllButton" value="Erase all" />
			<p style="color: red;" id="message"></p>
		</div>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var eraseAllButton = document.getElementById("eraseAllButton");
		var strokeStyleSelect = document.getElementById("strokeStyleSelect");
		var guidewireCheckbox = document.getElementById("guidewireCheckbox");
		var message = document.getElementById("message");
		
		var drawingSurfacsImageData = null;
		var mousedown = {};
		var rubberbandRect = {};
		var dragging = false;
		var guidewires = guidewireCheckbox.checked;
		var loc=null;
		drawHorizontLine(0);
		drawVerticalLine(0);
		//获取实际的鼠标在canvas的位置
		function windowToCanvas(x, y) {
			var bbox = canvas.getBoundingClientRect();
			return {
				x : x - bbox.left * (canvas.width / bbox.width),
				y : y - bbox.top * (canvas.height / bbox.width)
			};
		}
		//保存当前的canvas上的数据
		function saveDrawingSurface() {
			drawingSurfacsImageData = context.getImageData(0, 0, canvas.width, canvas.height);
		}
		//恢复canvas的数据，主要用来显示最新的线段，擦除原来的线段
		function restoreDrawingSurface() {
			context.putImageData(drawingSurfacsImageData,
					0, 0, 0, 0, canvas.width, canvas.height	
				);
		}
		
		//应该是计算需要偏移的量???不懂他要这个干嘛
		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;
			}
			if(loc.y > mousedown.y) {
				rubberbandRect.top = mousedown.y;
 			} else {
				rubberbandRect.top = loc.y;
 			}
 			
 			message.innerHTML = "mousedown.x="+mousedown.x+",mousedown.y="+mousedown.y+",loc.x="+loc.x+",loc.y="+loc.y;
		}
		//更新
		function  updateRubberband(loc) {	
			//此处在《HTML5 canvas核心技术——图形、动画与游戏开发》一书中
			//updateRubberbandRectangle方法是没有注释的，但是我不懂要这个
			//方法有什么作用，注释之后也不影响，话说我也不用话什么矩形哇
			//有知道这个方法在这里是做什么的同学在下方评论一下告知哈
			//updateRubberbandRectangle(loc);
			drawRubberbandShape(loc);
		}
		//画最新的线条
		function drawRubberbandShape(loc) {
			context.beginPath();
			context.moveTo(mousedown.x, mousedown.y);
			context.lineTo(loc.x, loc.y);
			context.stroke();
		}
		//画横线，在y坐标上
		function drawHorizontLine(y) {
			context.beginPath();
			context.moveTo(0, y+0.5);
			context.lineTo(canvas.width, y+0.5);
			context.stroke();
		}
		//画竖线
		function drawVerticalLine(x) {
			context.beginPath();
			context.moveTo(x+0.5, 0);
			context.lineTo(x+0.5,canvas.height);
			context.stroke();
		}
		function drawGuidewires(x, y) {
			context.save();
			context.strokeStyle = "rgba(0,0,230, 0.4)";
			context.lineWidth = 0.5;
			drawHorizontLine(y);
			drawVerticalLine(x);
			context.restore();
		}
		canvas.onmousedown = function(e) {
			loc = windowToCanvas(e.clientX, e.clientY);
			
			e.preventDefault();
			saveDrawingSurface();
			mousedown.x = loc.x;
			mousedown.y = loc.y;
			dragging = true;
		};
		canvas.onmousemove = function(e){
			
			//判断当前是否用户在拖动
			if(dragging) {
				e.preventDefault();
				loc = windowToCanvas(e.clientX, e.clientY);
				
				restoreDrawingSurface();
				updateRubberband(loc);
				if(guidewires) {
					//如果选中的加入辅助线
					//这里的辅助线应该只有在鼠标那个地方才出现的
					drawGuidewires(loc.x, loc.y);
				}
			}
		};
		canvas.onmouseup = function(e) {
			loc = windowToCanvas(e.clientX, e.clientY);
			restoreDrawingSurface();
			updateRubberband(loc);
			//鼠标抬起，拖动标记设为否
			dragging = false;
		};
		eraseAllButton.onclick = function(e){
			context.clearRect(0, 0, canvas.width, canvas.height);
			saveDrawingSurface();
		};
		strokeStyleSelect.onchange = function(e){
			context.strokeStyle = strokeStyleSelect.value;
		};
		guidewireCheckbox.onchange = function(e){
			guidewires = guidewireCheckbox.checked;
		};
		context.strokeStyle = strokeStyleSelect.value;
		
	</script>
</html>