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

更新：填充2行之间的空格，绘制正方形：

我认为这些行被定义为：

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

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

from（x1，y1） - ＆gt; （x2，y2） - ＆gt; （x3，y3） - ＆gt; （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

画布图填充行之间的空格

1 个答案: