网页中虚线效果展示在是常见使用的一个功能，那么在canvas画布中我们要如何实现虚线的功能呢？

本来介绍基于canvas实现画布的虚线功能。

一、绘制虚线公用方法

//绘制虚线
drawDashLine(ctx,x1,y1,x2,y2,dashLength){
	ctx.setStrokeStyle("#cccccc")//线条颜色
	ctx.setLineWidth(1)//线条宽度
	var dashLen = dashLength,
	xpos = x2 - x1, //得到横向的宽度;
	ypos = y2 - y1, //得到纵向的高度;
	numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
	//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
	for(var i=0; i<numDashes; i++){
	 if(i % 2 === 0){
		 ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
		 //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
	  }else{
		  ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
	  }
	}
	ctx.stroke();
}

二、公用方法参数解析

    ctx：创建的canvas画布。

    x1：起点X轴位置

    y1：起点Y轴位置

    x2：终点X轴位置

    y2：终点Y轴位置

    dashLength：虚线的长度

关于其余的设置，如颜色、线条宽度直接在代码中设置即可。如果需要动态配置，直接提取出来在方法中加参数即可。

注：x1、y1为一个点，x2、y2为另一个点，两点连载一起为一条直线。