在画布中绘制定时循环

Question

我下面有这段代码，它应该根据计时器绘制周期。然而，它以 3 个同时的部分开始并绘制循环。我不明白为什么以及如何让它绘制一个平滑的循环：

window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 500 / 60);
        };
    })();

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var data = ['Red,250', 'Blue,530', 'Orange,390', 'Green,190', 'Purple,450', 'Brown,600'];

var myCycle = {
    x: canvas.width / 2,
    y: (canvas.height / 2) - 200,//add to push down
    radius: 10,
    colour: '#8ED6FF'
};

//draw the object first, then animate it
var myTotal = 1810;
var lastend = -Math.PI / 2;
var currentEndAngle = 0;
var currentStartAngle = 0;
var radius = (canvas.height) / 6;

var startAngle = -1 * Math.PI/2;
var endAngle = startAngle + (Math.abs(190) / myTotal);


function drawArc(myVal, myCol) {

    //drawArcFill
    //Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
    endAngle = startAngle + (2 * Math.PI * (Math.abs(myVal) / myTotal));

    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.arc(100, 100, (canvas.height / 8), startAngle, endAngle, false);
    ctx.lineWidth = 2.5;
    ctx.closePath();
    ctx.strokeStyle = myCol;
    ctx.stroke();

    startAngle = endAngle;
}

//write static texts
var timer = 100;
function animate(startTime) {

    // update
    var time = (new Date()).getTime() - startTime;
    var linearSpeed = timer;//increase to run faster, decrease to slow down
    // pixels / second
    var newX = linearSpeed * time / (5 * timer);//keep the 1000, it is per second
    var myVal = 0;
    var myName = '';
    var i = 0;

    //draw cycles on the same axis
    for (i = 0; i < data.length; ++i) {
        myCycle.x = 50;//cycles on the same axis
        // Extract the data
        var values = data[i].split(",");
        myName = values[0];
        myVal = values[1];
    
    }

    if (newX <= parseInt(myVal)) {
            drawArc(myVal, myName)
        };
   
    // request new frame
    requestAnimFrame(function () {
        animate(startTime);
    });

}
// wait one second before starting animation
setTimeout(function () {
    var startTime = (new Date()).getTime();
    animate(startTime);
}, timer);

<canvas id="myCanvas" width="800" height="900"></canvas>

Answer 1

您需要进行 2 项更改

删除
```
ctx.moveTo(400, 450);
```
和
```
ctx.closePath();
```
。这些导致线条被绘制
在传递给画布绘图函数之前将角度转换为弧度。

这是最终代码

<!DOCTYPE HTML>
<html>

<head>
  <title>ColumnCycle Growth</title>
  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas" width="800" height="900"></canvas>
  <script>
    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 500 / 60);
        };
    })();

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var data = ['Red,250', 'Blue,530', 'Orange,390', 'Green,190', 'Purple,450', 'Brown,600'];

    var myCycle = {
      x: canvas.width / 2,
      y: (canvas.height / 2) - 200, //add to push down
      radius: 10,
      colour: '#8ED6FF'
    };

    //draw the object first, then animate it
    var myTotal = 1810;
    var lastend = -Math.PI / 2;
    var currentEndAngle = 0;
    var currentStartAngle = 0;
    var radius = (canvas.height) / 6;

    var startAngle = -1 * Math.PI / 2;
    var endAngle = startAngle + (Math.abs(190) / myTotal);


    function drawArc(myVal, myCol) {

      //drawArcFill
      //Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
      endAngle = startAngle + (2 * Math.PI * (Math.abs(myVal * Math.PI / 180) / myTotal));

      ctx.beginPath();
      // ctx.moveTo(400, 450);
      ctx.arc(400, 450, (canvas.height / 4), startAngle, endAngle, false);
      ctx.lineWidth = 2.5;
      // ctx.closePath();
      ctx.strokeStyle = myCol;
      ctx.stroke();

      startAngle = endAngle;
    }

    //write static texts
    var timer = 100;

    function animate(startTime) {

      // update
      var time = (new Date()).getTime() - startTime;
      var linearSpeed = timer; //increase to run faster, decrease to slow down
      // pixels / second
      var newX = linearSpeed * time / (5 * timer); //keep the 1000, it is per second
      var myVal = 0;
      var myName = '';
      var i = 0;

      //draw cycles on the same axis
      for (i = 0; i < data.length; ++i) {
        myCycle.x = 50; //cycles on the same axis
        // Extract the data
        var values = data[i].split(",");
        myName = values[0];
        myVal = values[1];

      }

      if (newX <= parseInt(myVal)) {
        drawArc(myVal, myName)
      };

      // request new frame
      requestAnimFrame(function() {
        animate(startTime);
      });

    }
    // wait one second before starting animation
    setTimeout(function() {
      var startTime = (new Date()).getTime();
      animate(startTime);
    }, timer);
  </script>

</body>

</html>

在画布中绘制定时循环

问题描述投票：0回答：1

1个回答

最新问题

在画布中绘制定时循环

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1