Question

我在画布上有一个三角形，我想用颜色填充它......也许不止一种颜色..我怎么能这样做？

我的三角形在这里：

function draw() {

        var width = 360;  // Triangle Width
        var height = 400; // Triangle Height
        var padding = 90;

        // Draw a path
        ctx.beginPath();
        ctx.moveTo(padding + width/2, padding+height);        // Top Corner
        ctx.lineTo(padding + width,  padding); // TOP Right
        ctx.lineTo(padding,  padding);         // TOP Left
        ctx.closePath();

        ctx.strokeStyle = "#e8ecef";
        ctx.lineWidth = 25;
        ctx.stroke();



        ctx.restore();
}

当前结果与此图片中的结果类似：

结果我想要这样的东西：

请帮忙吗？我怎么能这样做？或者如果有任何插件会帮助我更快地完成这项工作？

Answer 1

合成模式

只需使用几种合成模式和非常少的数学模型（仅计算正确位置）即可解决问题。

收据将是：

绘制一个代表完整三角形背景的面具（颜色无关紧要，只要它是不透明的）
使用硬过渡创建渐变以定义不同的颜色部分。
在顶部合成一个矩形，使用source-in模式剪切为背景形状。
使用正常source-over模式

所有这些步骤都可以重复使用单个路径。渐变将允许您在一个位置定义所有彩色部分。只需确保每个部分以相同的颜色开始和结束，并且下一部分将从前一个停止的位置开始。这将在各部分之间形成硬边缘。

由于渐变色停止采用标准化值，因此仅通过定义相对于三角形的渐变线的起点和终点来匹配任何大小就变成了一项简单的任务。的位置和大小。

根据需要进行调整。

修改代码的示例

我在您的基本代码中插入了代码，以显示修改所需的位置。

＆＃13;

var ctx = c.getContext("2d"),
    width = 360, height = 400, padding = 90, split = 0.33;

// Draw a path that will be reused below
ctx.beginPath();
ctx.moveTo(padding + width/2, padding+height); // Top Corner
ctx.lineTo(padding + width,  padding);         // TOP Right
ctx.lineTo(padding,  padding);                 // TOP Left
ctx.closePath();

// fill for a mask (color doesn't matter as long as it's opaque)
ctx.fill();

// define gradient
var gr = ctx.createLinearGradient(0, padding, 0, padding+height); // line
gr.addColorStop(0    , "rgb(187, 19, 221)");
gr.addColorStop(split, "rgb(187, 19, 221)");
gr.addColorStop(split, "rgb(38, 199, 222)");
gr.addColorStop(1    , "rgb(38, 199, 222)");

// fill the colored sections (adjust positions as needed)
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = gr;
ctx.fillRect(0, 0, c.width, c.height);

// stroke outline
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = "#e8ecef";
ctx.lineWidth = 25;
ctx.stroke();

＆＃13;

<canvas id=c width=500 height=550></canvas>

＆＃13;

Answer 2

有效地，这样做的一个好方法是绘制一个基本三角形，然后在其顶部绘制一个梯形，然后对它们进行描边。

function draw(percent) {

    var width = 360;  // Triangle Width
    var height = 400; // Triangle Height
    var padding = 90;

    // Draw the purple triangle underneath
    ctx.beginPath();
    ctx.moveTo(padding + width/2, padding+height);        // Top Corner
    ctx.lineTo(padding + width,  padding); // TOP Right
    ctx.lineTo(padding,  padding);         // TOP Left

    ctx.fillStyle = "#990099";
    ctx.fill();

    // Draw second triangle/trapezium over the top
    ctx.beginPath();
    ctx.moveTo(padding + width*percent/2, padding+height*percent);          //Bottom left
    ctx.lineTo(padding + width - width*percent/2, padding+height*percent);  //Bottom right
    ctx.lineTo(padding + width,  padding); // TOP Right
    ctx.lineTo(padding,  padding);         // TOP Left

    ctx.fillStyle = "#00ccff";
    ctx.fill();

    // Draw the grey line around the triangles
    ctx.beginPath();
    ctx.moveTo(padding + width/2, padding+height);        // Top Corner
    ctx.lineTo(padding + width,  padding); // TOP Right
    ctx.lineTo(padding,  padding);         // TOP Left
    ctx.closePath();

    ctx.strokeStyle = "#e8ecef";
    ctx.lineWidth = 25;
    ctx.stroke();

    ctx.restore();
}

draw(0.1);

绘制函数适用于0到1之间的任何值，其中0表示0％蓝色，1表示100％蓝色。由于这是一个三角形，填充的区域在50％时不会显得相等，但百分比将位于顶部和底部坐标之间。

我希望这会有所帮助

Answer 3

三角形和区域

求解分数（p）（0-1）给出三角形（w）宽度和（h）高度的新高度（h1）

三角形区域是

w * h * 0.5

切割三角形会得到一个三角形和一个梯形。

我们将解决分数区域是梯形的区域。

以三角形w，h和h1表示的梯形区域（尖端的另一端），其中h1是梯形的未知高度。

a1 = w * h1 - （w / 2 * h）* h1 * h1

h1 * h1表示此解是一个二次方，因此使公式等于0.我们知道梯形的面积是三角形面积乘以分数，所以使用（w * h * 0.5 * p）并根据h1减去上述区域解决方案

0 = w * h * 0.5 * p - w * h1 - （w / 2 * h）* h1 ²

这给出了二次方的一般形式是ax ² + bx + c = 0（在这种情况下，未知值x是h1梯形的高度），可以用（-b）求解（+/-）sqrt（b ² - 4ac））/ 2a。由于解决方案中的（+/-）有两个答案，在这个阶段不知道哪个答案是正确的。

因此要解决我们需要的a，b，c

a = w /（2 * h）
b = - w
c = w * h * 0.5 * p

所以作为一个功能

// return the height of the trapezoid made from a triangle of width height that 
// has an area equal to the area of the triangle * fraction
function getFractionHeightOfTriangle(width,height,fraction){
      var a = width / (2 * height);
      var b = -width;
      var c = width * height * 0.5 * fraction;

      // find the two solutions
      var h1_a = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
      var h1_b = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);

      // from experiment the solution is the second one
      // or you can check which is positive and return that
      return h1_b;  
  }

使用顶部作为原点绘制三角形

// x,y is the top (pointy end) w is width h is height
// col is stroke colour, col1 is fillColour
// lineW is line width.
var drawTriangle = function(x,y,w,h,col,col1,lineW){
    ctx.beginPath();
    ctx.strokeStyle = col;
    ctx.fillStyle = col1;
    ctx.lineWidth = lineW;
    ctx.moveTo(x,y );
    ctx.lineTo(x + w / 2 ,y + h);
    ctx.lineTo(x - w / 2 ,y + h);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

绘制三角形的一部分

// See above function for x,y,w,h,col,col1,lineW
// which is == "top" for pointy end and != "top" for trapezoid
// amount is the height of the top
var drawPartTriangle = function(x,y,w,h,which,amount,col,col1,lineW){
    ctx.beginPath();
    ctx.strokeStyle = col;
    ctx.fillStyle = col1;
    ctx.lineWidth = lineW;
    if(which === "top"){
        ctx.moveTo(x,y);
        ctx.lineTo(x + w / 2 * (amount / h),y + amount);
        ctx.lineTo(x - w / 2 * (amount / h),y + amount);
    }else{
        ctx.moveTo(x + w / 2 * (amount / h),y + amount);
        ctx.lineTo(x + w / 2 ,y + h);
        ctx.lineTo(x - w / 2 ,y + h);
        ctx.lineTo(x - w / 2 * (amount / h),y + amount);   
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

html5画布三角形按百分比填充颜色

3 个答案:

合成模式

修改代码的示例