在圆形画布视口中实时动画线条或面积图

Question

我是Javascript / HTML5前端编程的新手。我想知道如何有一个圆形画布视图，其中有一个实时图形。

我已经看过D3.js和立体主义用于绘图，我对使用画布动画等有一个简要的了解。通常，图形显示在矩形视图中，在其中显示图形。

请查看我附上的图片。我环顾四周，没有找到任何可以做到这一点的图书馆，所以决定自己做，但需要一些关于如何以有效的方式解决这个问题的要点。

所以基本上是某种形式的遮蔽，如下图所示

产生以下类型的图表

Answer 1

您可以使用context.clip方法仅在一个圆圈内显示图表：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var nextTime=0;
var delay=16*10;
var cx=150;
var cy=150;
var radius=50;


var data=[];
for(var i=0;i<radius*2;i++){
  data.push(Math.random()*radius*2);
}

ctx.fillStyle='rgb(186,228,180)';
ctx.beginPath();
ctx.arc(cx,cy,radius,0,Math.PI*2);
ctx.clip();

requestAnimationFrame(animate);

function animate(time){
  requestAnimationFrame(animate);
  if(time<nextTime){return;}

  nextTime+=delay;

  // new data point
  data.shift();
  data.push(Math.random()*radius*2);

  var x=cx-radius;
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.moveTo(x,cy);
  for(var i=0;i<data.length;i++){
    x+=5;
    ctx.lineTo(x,cy-radius+data[i]);
  }
  ctx.lineTo(cx+radius,cw);
  ctx.lineTo(cx-radius-1,cy+radius);
  ctx.closePath();
  ctx.fillStyle='rgb(186,228,180)';
  ctx.fill();

  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,Math.PI*2);
  ctx.stroke();

}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>