Question

我想连续在画布上画一条线。我从许多来源读过。有一个例子用svg和jquery绘制它们。

我想要做的是，在没有jquery或svg的情况下连续画线，就像这个例子http://jsfiddle.net/UtmTh/一样。有可能吗？

在这样的轨道中画一条线。

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

}

帮助＆amp;教我如果我的计划和设计出错了。

Answer 1

与评论说的一样，JQuery库的唯一用途是第一行，获取canvas元素。

您可以使用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>

画一条连续动画的线

1 个答案: