动画渐进式虚线 HTML5 Canvas & Jquery答案

【问题标题】：Animate progressively drawn dashed line HTML5 Canvas & Jquery动画渐进式虚线 HTML5 Canvas & Jquery
【发布时间】：2013-02-25 11:56:02
【问题描述】：

我怎样才能修改下面的代码，使绘制的线是虚线，你可以在提供的 jfiddle 中看到它的作用。

<html>
    <style>
        #canvas
        {
        border-style:solid;
        border-width:1px;
        }
    </style>
    <div id="canvas"> 
        <p>Hover over me</p>        
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</html>

$(function() {

    animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
        $('#' + hoverDivName).hover(

        function() {
            var line = canvas.path(pathString).attr({
                stroke: colorNumber
            });
            var length = line.getTotalLength();

            $('path[fill*="none"]').animate({
                'to': 1
            }, {
                duration: 5000,
                step: function(pos, fx) {
                    var offset = length * fx.pos;
                    var subpath = line.getSubpath(0, offset);
                    canvas.clear();
                    canvas.path(subpath).attr({
                        stroke: colorNumber
                    });

                },
            });
        }, function() {
            $('path[fill*="none"]').stop(true, false).fadeOut();
        });
    };

    var canvas = Raphael('canvas', 200, 200);
    var pathString = "M10 10L10 200L100 200Z";

    animateLine(canvas, "canvas", "#000", pathString);

});

http://jsfiddle.net/eA8bj/

【问题讨论】：

whatwg specification for canvas 提到了应该执行此操作的 setLineDash 方法，但我尝试过的浏览器均不支持该方法。
请参阅this 答案，了解如何在画布中制作虚线或虚线。

标签： jquery html canvas

【解决方案1】：

使用“stroke-dasharray”属性：

http://jsfiddle.net/eA8bj/70/

https://developer.mozilla.org/en-US/docs/SVG/Attribute/stroke-dasharray

例如：

            canvas.path(subpath).attr({
                stroke: colorNumber,
                "stroke-dasharray":"--"
            });

【讨论】：

谢谢，完美！您知道我如何调整代码，使其在单击链接时启动吗？还是其他活动？
jsfiddle.net/eA8bj/72