我对 Javascript/HTML5 前端编程相当陌生。我想知道如何拥有一个圆形 Canvas View ,其中有一个实时图表。
我已经研究过 D3.js 和 cubism 进行绘图,并且对使用 canvas 进行动画等有一个简单的了解。通常图形显示在矩形 View 中,在其中显示图形。
请查看我附加的图片。我环顾四周,没有找到任何可以做到这一点的库,因此决定自己做,但需要一些关于如何以有效方式进行的要点。
基本上是某种形式的掩蔽,如下图所示
产生以下类型的图表
最佳答案
您可以使用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>
关于javascript - 圆形 Canvas 视口(viewport)中的实时动画折线图或面积图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28286603/