javascript - 圆形 Canvas 视口(viewport)中的实时动画折线图或面积图

Question

我对 Javascript/HTML5 前端编程相当陌生。我想知道如何拥有一个圆形 Canvas View ，其中有一个实时图表。

我已经研究过 D3.js 和 cubism 进行绘图，并且对使用 canvas 进行动画等有一个简单的了解。通常图形显示在矩形 View 中，在其中显示图形。

请查看我附加的图片。我环顾四周，没有找到任何可以做到这一点的库，因此决定自己做，但需要一些关于如何以有效方式进行的要点。

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

产生以下类型的图表

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>