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

html5-canvas 专栏收录该内容
15 篇文章 0 订阅

解决思路

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

其实现在已经有了专门画虚线的方法了
  • 0
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值