Jquery 动画逐步绘制虚线HTML5画布&；滑动分页_Jquery_Html_Canvas

Jquery 动画逐步绘制虚线HTML5画布&；滑动分页

jquery html canvas

Jquery 动画逐步绘制虚线HTML5画布&；滑动分页,jquery,html,canvas,Jquery,Html,Canvas,如何修改以下代码，使绘制的线为虚线，您可以在提供的jfiddle中看到它的作用 <html> <style> #canvas { border-style:solid; border-width:1px; } </style> <div id="canvas"> <p>Hover over me</p>

如何修改以下代码，使绘制的线为虚线，您可以在提供的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);

});


#帆布
{
边框样式：实心；
边框宽度：1px；
}
将鼠标悬停在我上方
$（函数（）{
animateLine=函数（画布、hoverDivName、colorNumber、pathString）{
$（'#'+hoverDivName）.悬停(
函数（）{
var line=canvas.path（pathString.attr）({
笔划：颜色编号
});
var length=line.getTotalLength（）；
$（'path[fill*=“none”]'）。设置动画({
“收件人”：1
}, {
持续时间：5000，
步骤：功能（pos、fx）{
var offset=长度*fx.pos；
var subpath=line.getSubpath（0，偏移量）；
canvas.clear（）；
canvas.path（子路径）.attr({
笔划：颜色编号
});
},
});
}，函数（）{
$（'path[fill*=“none”]'）。停止（true，false）。淡出（）；
});
};
var canvas=Raphael（“画布”，200200）；
var pathString=“M10 10L10 200L100 200Z”；
动画线（画布，“画布”，“000”，路径字符串）；
});

使用“stroke dasharray”属性：

e、 g:

提到了一个setLineDash方法，它应该可以做到这一点，但我尝试的浏览器都不支持它。请参阅关于如何在画布中生成虚线或虚线的答案。谢谢，太好了！你知道我如何调整代码，使其在点击链接时启动吗？或者其他什么事件？

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