使用Canvas绘制虚线段

原创 Dean 工作笔记 二维码阅读
2016-05-26 11:17

使用过canvas的朋友都知道,canvas官方没有实现虚线绘制的API,但是在实际场景中,我们经常可能会需要绘制虚线,比如裁剪线之类的,那么我们怎么使用canvas来绘制虚线呢?

其实使用canvas绘制虚线很简单,我们只需要求出两个点之间的间距,然后通过根据每段虚线的长度计算得出一个分段数量,然后停一段画一段最终就实现了一个虚线的效果了,实现代码:

/**
	@params ctx 2D绘图环境
	@params sx 起始点X
	@params sy 起始点y
	@params tx 终点x
	@params ty 终点y
	@params color 线条颜色
	@params lineWidth 线条宽度
	@params dashLength 虚线间隔
**/
function drawDashedLine(ctx,sx,sy,tx,ty,color,lineWidth,dashLen){
	var len = cacuDis(sx,sy,tx,ty),
		lineWidth = lineWidth || 1,
		dashLen = dashLen || 5,
		num = ~~(len / dashLen);
	ctx.beginPath();
	for(var i=0;i<num;i++){
		var x = sx + (tx - sx) / num * i,
			y = sy + (ty - sy) / num * i;
		ctx[i & 1 ? "lineTo" : "moveTo"](x,y);
	}
	ctx.closePath();
	ctx.lineWidth = lineWidth;
	ctx.strokeStyle = color;
	ctx.stroke();
}
//计算两点之间的距离
function cacuDis(sx,sy,tx,ty){
	return Math.sqrt(Math.pow(tx-sx,2)+Math.pow(ty-sy,2));
}

在线Demo:http://demo.deanhan.cn/dash-line

本文地址:https://www.deanhan.cn/js-dashed-line.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信