점진적으로 점선으로 그려진 애니메이션 애니메이션 HTML5 Canvas & Jquery

<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/

출처

2013-02-25 user1937021

[캔버스의 whatwg 사양] (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#line-styles)에는 setLineDash 메소드가 있습니다 그렇게하기 위해 노력했지만 브라우저는 지원하지 않았습니다. – Philipp

[this] (http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas) 캔버스에서 파선이나 점선을 만드는 방법에 대한 답변. – Zemljoradnik

사용 "뇌졸중 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":"--" 
      });

출처

2013-02-25 12:17:07 StuR

감사합니다. 링크를 클릭하여 코드를 시작하는 방법을 알고 있습니까? 아니면 다른 이벤트? – user1937021

http://jsfiddle.net/eA8bj/72/ <()에서 jQuery를 사용하고 사용하려는 이벤트를 사용하십시오. – StuR

점진적으로 점선으로 그려진 애니메이션 애니메이션 HTML5 Canvas & Jquery

답변

관련 문제