使用HTML5 Canvas和Jquery逐步绘制虚线动画

Question

使用HTML5 Canvas和Jquery逐步绘制虚线动画

5

我该如何修改以下代码，使得绘制的线条变为虚线？您可以在提供的 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/

- user1937021

Canvas的whatwg规范提到了一个setLineDash方法，据说可以实现这个功能，但是我试过的浏览器都不支持。 - Philipp

请参考这个答案，了解如何在画布中制作虚线或点状线。 - Zemljoradnik

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- StuR · Accepted Answer

请使用“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":"--"
            });