html - 画布图表填充线条之间的空间

Question

我正在使用 html5 Canvas 开发一个简单的图表。这个想法是画两条线 - 一条用于最小值，另一条用于最大值，我设法做到并用一些颜色填充这两条线之间的空间。想知道最后一部分怎么做？

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();

更新：填充两行之间的空间，绘制一个正方形：

我假设这些行定义为：

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

然后绘制正方形以填充空间：

从 (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