html5 实现渐变虚线,html5 实现画虚线

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

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

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

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

function drawDashLine(context , x, y, x2, y2, dashLength)

{

dashLength=dashLength === undefiend?5:dashLength;

var deltaX = x2-x;

var deltaY = y2-y;

var numDashs = Math.floor(Math.sqrt(deltaX*deltaX+detalY*deltaY)/dashLenght);

for(var i =0 ;i

{

context[i%2===0?'moveTo':'lineTo'](x+deltaX/numDashs,y+deltaY/numDashs);

}

context.stroke();

}当需要画虚线的时候直接调用这个方法就行了。但是有的人可能会需要将这个函数直接植入到html5，，以方便任何时候调用，这也是可行的，但是只是针对你自己使用。

方法二，上面已经提示到了，可以将这个方法直接植入到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);

}

实际上方法二不仅可以画虚线，虚线只是其中之一的功能，主要的区别在于最后一个参数的设置，设置的不同，所绘制的虚线类型也不相同。至于为什么，大家如果愿意的话，可以自己去研究一下。