-2

SVG要素内にアニメーションの線を描画しようとしています。つまり、線は一定期間にわたって描画されます。

私は検索しましたが、すべての回答は通常Raphaelライブラリを指しています。ただし、インターネットで利用できるライブラリは使用できません。

どこから始めればよいかについてのいくつかの指針が必要です。

4

2 に答える 2

4

私はライブでSVGを使ったことがありませんが、簡単なグーグルから10分で次のことを思いつきました。

<svg width=200 height=200>
    <line id="myLine" x1="5" y1="10" x2="5" y2="10" stroke-width=".5" stroke="red"/>
</svg>
<script>
var line = document.getElementById('myLine');
var count = 0;
var interval = window.setInterval(function() {
    line.setAttribute('y2', 2 + +line.getAttribute('y2'));
    line.setAttribute('x2', 1 + +line.getAttribute('x2'));
    if (count++ > 75)
        window.clearInterval(interval);
}, 100);
</script>

参照： http： //jsfiddle.net/YSmDH/

于 2013-03-08T11:46:02.937 に答える
0

要素を使用して、次の<canvas id='mycanvas' width='300' height='300' />ように線を引く必要があります。

function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

   // use getContext to use the canvas for drawing
   var ctx = canvas.getContext('2d');

   // Stroked triangle
   ctx.beginPath();
   ctx.moveTo(125,125);
   ctx.lineTo(125,45);
   ctx.lineTo(45,125);
   ctx.closePath();
   ctx.stroke();

  }
}

タイムアウトを追加して 2D-Context をクリアし、後で新しく作成することで、ラインをアニメーション化できます

これは、キャンバス操作の非常に優れたチュートリアルです。

于 2013-03-07T08:59:43.657 に答える