用html5实现画虚线效果代码

html5已经出来好长一段时间了，只是最近才开始接触到它，html5提供了很多内置的函数可以实现很多功能，比如 画线段、画矩形、画圆、画弧等。但是html5没有提供画虚线的功能，如果想实现在canvas上画曲线就要发费一点功夫了。

下面提供两种方式实现画虚线的功能：

方法一就是就是单独写一个函数，当想画曲线的时候就调用这个曲线就行了。

function drawDashLine(context , x, y, x2, y2, dashLength)
{
	
	
	dashLength=dashLength === undefined?5:dashLength;
	var deltaX = x2-x;
	var deltaY = y2-y;
	var numDashs = Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength);
	
	for(var i =0 ;i<numDashs;i++)
	{
   		context[i%2===0?'moveTo':'lineTo'](x+(deltaX/numDashs)*i,y+(deltaY/numDashs)*i);
	}
	context.stroke();
}
当需要画虚线的时候直接调用这个方法就行了。但是有的人可能会需要将这个函数直接植入到html5，以方便任何时候调用，这也是可行的，但是只是针对你自己使用。

							

								
								

									奥硕企业网站管理系统3.0.2
									
临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；
方法二，上面已经提示到了，可以将这个方法直接植入到html5，当做canvas的一个函数
CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,
			dashArray)
	{
		var temp = 0.1;
		if (!dashArray)
			dashArray = [ 10, 5 ];
		var dashCount = dashArray.length;
		this.moveTo(x + temp, y + temp);

		var dx = (x2 - x), dy = (y2 - y);
		var slope = dx ? dy / dx : 1e15;
		var distRemaining = Math.sqrt(dx * dx + dy * dy);
		var dashIndex = 0, draw = true;
		while (distRemaining >= 0.1 && dashIndex < 10000)
		{
			var dashLength = dashArray[dashIndex++ % dashCount];
			if (dashLength == 0)
				dashLength = 0.001; // Hack for Safari
			if (dashLength > distRemaining)
				dashLength = distRemaining;
			var xStep = Math
					.sqrt(dashLength * dashLength / (1 + slope * slope));
			x += xStep;
			y += slope * xStep;
			this[draw ? 'lineTo' : 'moveTo'](x + temp, y + temp);
			distRemaining -= dashLength;
			draw = !draw;
		}
		// Ensure that the last segment is closed for proper stroking
		this.moveTo(0, 0);
	}
实际上方法二不仅可以画虚线，虚线只是其中之一的功能，主要的区别在于最后一个参数的设置，设置的不同，所绘制的虚线类型也不相同。至于为什么，大家如果愿意的话，可以自己去研究一下。
需要学习html5的同学请关注php中文网html5视频教程，众多html5在线视频教程可以免费观看！