javascript - 使用 javascript 绘制动画线（没有 Raphael 或其他插件）

Question

我正在尝试在 SVG 元素内绘制一条动画线。即这条线在一段时间内绘制。

我已经搜索过，但所有答案通常都指向 Raphael 库。但是，我不能使用互联网上的任何图书馆。

需要一些关于从哪里开始的指示。

Answer 1

我从来没有，曾经在我的生活中使用过 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/

Answer 2

您应该使用该<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 上下文，然后创建新的，您可以为您的线条制作动画

这是一个非常好的画布操作教程。