HTML5 动画虚线

Posted 2023-03-05

【中文标题】HTML5 动画虚线

【英文标题】：HTML5 Animating a dashed line

【发布时间】：2011-08-26 03:46:42

【问题描述】：

对于 html5 游戏相对较新，只是想问一下是否有人知道是否可以沿路径为虚线设置动画？想想诺基亚时代的蛇，只是一条虚线......

我有一条虚线（表示电流流动），我想将其动画化为“移动”以显示电流正在流向某物。

感谢 Rod 在 this 帖子上的回答，我已经确定了虚线，但不知道从哪里开始让它移动。有人知道从哪里开始吗？

谢谢！

【参考方案1】：

得到它的工作here，基于this post by phrogz。

我做了什么：

添加一个start 参数，它是一个介于 0 和 99 之间的数字 计算dashSize 对破折号数组的内容求和 根据start 百分比计算dashOffSet 作为dashSize 的分数 从 x、y 中减去偏移量并添加到 dx、dy 中 只有在偏移消失后才开始绘制（这是负数，记住） 添加了 setInterval 以将 start 从 0 更新到 99，步长为 10

---

更新

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

Demo here

更新代码：

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;

【讨论】：

@ariel，这正是我所追求的！我整天都在玩它，但无法让偏移量正常工作。非常感谢！哦，我喜欢 JSFiddle，我从未见过/听说过这样的事情！非常适合像上面那样破解一些东西......

哦，您的解决方案似乎不适用于向下的线（在 y 轴上直线），但对于对角线或水平线（在 x 轴上直线）非常有效。有什么想法吗？

在这种情况下，斜率是无限的。我猜原来的算法也行不通。您必须检查 dy > dx 是否使用基于 y 的斜率。

是的，我认为这就是正在发生的事情。我真的只会将它用于 90° 线。所以像 var slope = (dy > dx) ？ dy/dx：是的； ?

谢谢@ariel，太棒了！我的解决方案缺少对slopex 的第二次检查，您的解决方案更加优雅。

【参考方案2】：

您可以使用 SNAPSVG 库创建虚线动画。

请在此处查看教程DEMO