css 一条虚线-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中，以方便随时调用。 这也是可行的，但仅限于你自己使用。
方法2，如上所述，可以直接嵌入到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  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);
	}

其实css 一条虚线，除了画实线之外，虚线只是方法2的功能之一，主要区别在于最后一个参数的设置。 根据设置的不同，绘制的实线类型也不同。 至于为什么，如果你愿意的话css 一条虚线，你可以自己研究一下。