html5虚线进度条,HTML5动画虚线

我做了什么：

添加start参数，该参数是0到99之间的数字

计算dashSize汇总破折号数组的内容

根据dashOffSet％计算dashSize为start的一小部分

从x，y减去偏移量并添加到dx，dy

在偏移消失后才开始画画(这是消极的，请记住)

添加setInterval以将start从0更新为99，步骤为10

更新强>

原始算法不适用于垂直或负斜线。添加了一个检查，根据这些情况下的y斜率使用倾斜度，而不是x斜率。

{{3}}

更新的代码：

if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {

CanvasRenderingContext2D.prototype.dashedLine = function(x, y, x2, y2, dashArray, start) {

if (!dashArray) dashArray = [10, 5];

var dashCount = dashArray.length;

var dashSize = 0;

for (i = 0; i < dashCount; i++) dashSize += parseInt(dashArray[i]);

var dx = (x2 - x),

dy = (y2 - y);

var slopex = (dy < dx);

var slope = (slopex) ? dy / dx : dx / dy;

var dashOffSet = dashSize * (1 - (start / 100))

if (slopex) {

var xOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));

x -= xOffsetStep;

dx += xOffsetStep;

y -= slope * xOffsetStep;

dy += slope * xOffsetStep;

} else {

var yOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));

y -= yOffsetStep;

dy += yOffsetStep;

x -= slope * yOffsetStep;

dx += slope * yOffsetStep;

}

this.moveTo(x, y);

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 > distRemaining) dashLength = distRemaining;

if (slopex) {

var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));

x += xStep

y += slope * xStep;

} else {

var yStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));

y += yStep

x += slope * yStep;

}

if (dashOffSet > 0) {

dashOffSet -= dashLength;

this.moveTo(x, y);

} else {

this[draw ? 'lineTo' : 'moveTo'](x, y);

}

distRemaining -= dashLength;

draw = !draw;

}

// Ensure that the last segment is closed for proper stroking

this.moveTo(0, 0);

}

}

var dashes = '10 20 2 20'

var c = document.getElementsByTagName('canvas')[0];

c.width = 300;

c.height = 400;

var ctx = c.getContext('2d');

ctx.strokeStyle = 'black';

var drawDashes = function() {

ctx.clearRect(0, 0, c.width, c.height);

var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);

if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;

ctx.lineWidth = 4;

ctx.lineCap = 'round';

ctx.beginPath();

ctx.dashedLine(10, 0, 10, c.height, dashGapArray, currentOffset);

ctx.dashedLine(0, 10, c.width, 10, dashGapArray, currentOffset);

ctx.dashedLine(0, 0, c.width, c.height, dashGapArray, currentOffset);

ctx.dashedLine(0, c.height, c.width, 0, dashGapArray, currentOffset);

ctx.closePath();

ctx.stroke();

};

window.setInterval(dashInterval, 500);

var currentOffset = 0;

function dashInterval() {

drawDashes();

currentOffset += 10;

if (currentOffset >= 100) currentOffset = 0;

}