【实例】html5-canvas中实现绘制虚线的方法

最新推荐文章于 2024-06-02 00:26:11 发布

原创最新推荐文章于 2024-06-02 00:26:11 发布 · 2.8w 阅读

4 ·

CC 4.0 BY-SA版权

html5-canvas 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了两种在HTML5 Canvas中绘制虚线的方法：一种是通过自定义`dashedLineTo`方法，交替使用`moveTo`和`lineTo`来实现；另一种则是利用现代浏览器支持的`setLineDash`属性简化实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决思路

我们使用类似moveTo加lineTo的方法绘制一段一段的线段
moveTo的方法不需要改动，我们只要把lineTo的方法改成绘制虚线就好，这时我们就需要一个新的方法来绘制虚线
新的方法需要获取moveTo中的坐标，以便向lineTo那样与moveTo方法产生关联
在新方法中我们要算出这个虚线总共有多少条线段，每条线段的起点终点的位置
在实际的绘制每段线段中我们应该交替使用moveTo和lineTo

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#canvas {
				border: solid thin black;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		//获取原context中的moveTo方法的内容
		var moveToFunction = CanvasRenderingContext2D.prototype.moveTo;
		//在原context中加入一个lashMoveToLocation对象来存储最近一个绘画点
		CanvasRenderingContext2D.prototype.lastMoveToLocation = {};
		
		//对原有的moveTo方法进行修改
		CanvasRenderingContext2D.prototype.moveTo = function(x, y) {
			//这个我想应该是类似于java中的super()吧
			moveToFunction.apply(context, [x,y]);
			//把最近绘制点的坐标写入lastMoveToLcation中
			this.lastMoveToLocation.x = x;
			this.lastMoveToLocation.y = y;
		};
		//在context中加入dashedLineTo方法
		CanvasRenderingContext2D.prototype.dashedLineTo = 
				function(x, y, dashLength){
			dashLength = dashLength === 0 || dashLength === undefined ?
				dashLength = 5 : dashLength = dashLength;
			//这个this就是context哈
			var startX = context.lastMoveToLocation.x;
			var startY = this.lastMoveToLocation.y;
			
			//线段数量
			var dashNum = Math.floor(Math.sqrt(Math.pow(startX-x, 2)+Math.pow(startY-y, 2))/ dashLength);
			for(var i = 0; i < dashNum; i++) {
				context[i%2 === 0 ? "moveTo" : "lineTo"](startX + i*(x-startX)/dashNum, startY + i*(y-startY)/dashNum);
			}
			context.stroke();
		};
		context.moveTo(canvas.width-190, canvas.height-90);
		context.dashedLineTo(150, 255);
	</script>
</html>

另一个代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="600" height="400"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		context.setLineDash([6, 6]);
		context.moveTo(100, 100);
		context.lineTo(400,300);
		context.stroke();
	</script>
</html>

其实现在已经有了专门画虚线的方法了