代码之家 › 专栏 › 技术社区 › jcubic

饼图画布动画在一帧上显示整圈

canvas animation javascript

jcubic · 技术社区 · 6 年前

我有类似于成长/收缩动画的饼图,但是在它的中间,有一个框架上显示了一个填充圆,我如何才能摆脱它?

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');
var increase = Math.PI * 2 / 100;
var max = Math.PI * 2;
var angle = 0;
var start = false;  
setInterval(function() {
  ctx.clearRect(0, 0, 32, 32);
  ctx.fillStyle = '#F00A0A';
  ctx.beginPath();
  if (start) {
    ctx.arc(16, 16, 12, angle, 0);
  } else {
    ctx.arc(16, 16, 12, 0, angle);
  }
  ctx.lineTo(16, 16);
  ctx.fill();
  angle += increase;
  if (angle >= max) {
    angle = 0;
    start = !start;
  }
}, 20);

<canvas width="32" height="32"/>

我试过了:

  if (angle !== 0) {
    ctx.beginPath();

    if (start) {
      ctx.arc(16, 16, 12, angle, 0);
    } else {
      ctx.arc(16, 16, 12, 0, angle);
    }
    ctx.lineTo(16, 16);
    ctx.fill();
  }

但这不起作用,当弧变边时,一帧显示全圆。

1 回复 | 直到 6 年前

Emil S. Jørgensen 6 年前

最简单的解决方法就是稍微偏移角度。

这样,当您更改绘图模式时,圆不会“完成”:

var canvas = document.body.appendChild(document.createElement('canvas'));
var canvasSize = canvas.width = canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#F00A0A';
var increase = Math.PI * 2 / 100;
var max = Math.PI * 2;
var angle = 0.0000001;
var start = false;
function update() {
    ctx.clearRect(0, 0, canvasSize, canvasSize);
    ctx.beginPath();
    ctx.arc(canvasSize / 2, canvasSize / 2, canvasSize / 3, angle, 0, start);
    ctx.lineTo(canvasSize / 2, canvasSize / 2);
    ctx.fill();
    angle += increase;
    if (angle >= max) {
        angle = angle % max;
        start = !start;
    }
    requestAnimationFrame(update);
}
update();

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前