连续画一条线

Question

我想在画布上连续画一条线。 我已经从很多来源读到了。 有一个示例使用svg和jquery绘制它们。

我想做的是像上述示例http://jsfiddle.net/UtmTh/那样，在没有jquery或svg的情况下连续画一条线。 可能吗？

像这样在轨道上画一条线。

function draw_line(param1,.......) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //just function to draw a lines
}
function line_track() {
      //set X & Y position start
      var x = 0;
      var y = 30;

      //set X & Y position finish
      //in here i want to create a finish position of line after animation run,
      like a jsfiddle example//

}

如果我的计划和设计有误，请帮助我。

Answer 1

就像评论中所说的那样，JQuery库的唯一用途是获取画布元素的第一行。

您可以使用var canvas = document.getElementById("paper");进行更改 。

另外，如果重复绘图，则不必在每个绘图周期执行clearRect和moveTo 。

 var canvas = document.getElementById('paper'); var c = canvas.getContext("2d"); var startX = 50; var startY = 50; var endX = 100; var endY = 100; var amount = 0; c.strokeStyle = "black"; c.moveTo(startX, startY); setInterval(function() { amount += 0.05; // change to alter duration if (amount > 1) amount = 1; // lerp : a + (b - a) * f c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); c.stroke(); }, 30); 

 <canvas id="paper" width="500" height="500"></canvas>