圆形 canvas 视口中的实时动画线或面积图

Question

我对 Javascript / HTML5 前端编程还很陌生。我想知道如何在其中有一个实时图表的循环 canvas 视图。

我看过 D3.js 和 cubism 作图，我对使用 canvas 做动画等有一个简单的了解。通常图形显示在矩形视图中，其中图形是显示。

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

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

生成以下类型的图表

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>

圆形 canvas 视口中的实时动画线或面积图

Live animated Line or Area graph in a circula canvas viewport

javascript

graph

html5-canvas