使用过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