html - キャンバス チャートは行間のスペースを埋めます

Question

html5 Canvas を使用して簡単なチャートを作成しています。アイデアは、2 つの線を描画することです。1 つは最小値用で、もう 1 つは最大値用です。これを実行し、これらの 2 つの線の間のスペースを色で塗りつぶすことができました。最後の部分はどうすればいいのだろうか？

Answer 1

あなたがしなければならないスペースを埋めるために：

//get the context of the canvas
var context = canvas.getContext("2d");
//begin to draw
context.beginPath();
//draw all the lines you need to do the path....
context.moveTo(x, y);
context.lineTo(x1,y1);
context.lineTo(x2,y2);
//end of draw
context.closePath();

//to fill the space in the shape
context.fillStyle = "#FF00FF";
context.fill(); 
//to draw a border
context.lineWidth = 5;     
context.strokeStyle = "#FF0000";
context.stroke();

更新: 2 つの線の間のスペースを埋めるには、正方形を描画します:

行は次のように定義されていると仮定します。

line1: from (x1,y1) to (x2,y2)
line2: from (x3,y3) to (x4,y4)

次に、スペースを埋めるために描画する正方形:

from (x1,y1) -> (x2,y2) -> (x3,y3) -> (x4,y4) および closepath();

それから：

context.beginPath();
context.moveTo(x1,y1); //go to first point
context.lineTo(x2,y2); //draw to second point
context.lineTo(x3,y3); //draw to third point
context.lineTo(x4,y4); //draw to last point
context.closePath();  //draw to first point
context.fill(); //fill the area