Question

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

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

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

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();

  }
}

通过添加timeout和clearing您的2D上下文，然后将其创建为新内容，您可以为线条设置动画

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

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

2 个答案: