分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了【实例】html5-canvas通过鼠标绘制线段，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在线演示

代码实现

<!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.5);
				-moz-Box-shadow: 4px 4px 8px rgba(0,0.5);
				-Box-shadow: 4px 4px 8px rgba(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,canvas.width,canvas.height);
		}
		//恢复canvas的数据，主要用来显示最新的线段，擦除原来的线段
		function restoreDrawingSurface() {
			context.putImageData(drawingSurfacsImageData,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,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,canvas.height);
			saveDrawingSurface();
		};
		strokeStyleSELEct.onchange = function(E){
			context.strokeStyle = strokeStyleSELEct.value;
		};
		guidewirecheckBox.onchange = function(E){
			guidewires = guidewirecheckBox.checked;
		};
		context.strokeStyle = strokeStyleSELEct.value;
		
	</script>
</html>