用一种以上的颜色按程序填充一个形状

Question

我正在用 node、js 等制作一个应用程序。我想填充可以通过数据点或其他具有不同分层颜色的格式创建的自定义形状。例如，我有一个三角形。我想用红色填充底部的 1/3，用蓝色填充中间的 1/3，用绿色填充顶部的 1/3。我该怎么做？

我正在查看 Paper.js 和基本 canvas，但它们似乎只有单色填充。

感谢任何建议！

Answer 1

您可以使用本机 html canvas 通过将您的形状（例如三角形）制作成裁剪区域。

这意味着您随后进行的任何填充都不会绘制在三角形之外。

您只需：

画个三角形
设为裁剪区域
在三角形的顶部 1/3 上绘制一个绿色矩形。 别担心...矩形将被裁剪为只出现在三角形内部。
在三角形的中间 1/3 处画一个蓝色矩形
在三角形底部 1/3 处画一个红色矩形

下面是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var points=[];
points.push({x:100,y:50});
points.push({x:150,y:150});
points.push({x:50,y:150});
points.push({x:100,y:50});

drawPoints(points);

function drawPoints(pts){
  var minY= 100000;
  var maxY=-100000;
  ctx.save();
  ctx.beginPath();
  for(var i=0;i<pts.length;i++){
    var p=pts[i];
    if(i==0){
      ctx.moveTo(p.x,p.y);
    }else{
      ctx.lineTo(p.x,p.y);
    }
    if(p.y<minY){minY=p.y;}
    if(p.y>maxY){maxY=p.y;}
  }
  ctx.stroke();
  ctx.clip();

  var height=maxY-minY;
  ctx.fillStyle='green';
  ctx.fillRect(0,minY,cw,minY,height/3);
  ctx.fillStyle='blue';
  ctx.fillRect(0,minY+height/3,cw,height/3);
  ctx.fillStyle='red';
  ctx.fillRect(0,minY+height*2/3,cw,height/3);
  ctx.restore();
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

Answer 2

我知道答案已被接受，但我想为未来的读者提供一个非常简单的方法。作为奖励，它会自动计算每个部分的高度并且速度很快，使用 线性渐变 -

结果将是

代码和演示

var ctx = document.querySelector("canvas").getContext("2d"),
    grad = ctx.createLinearGradient(0, 0, 0, 150);

grad.addColorStop(0, "red");     // start of red
grad.addColorStop(1/3, "red");   // end of red at 1/3

grad.addColorStop(1/3, "gold");  // start of gold at 1/3
grad.addColorStop(2/3, "gold");  // end of gold at 2/3

grad.addColorStop(2/3, "blue");  // start of blue at 2/3
grad.addColorStop(1, "blue");    // end of blue at 3/3

// Fill a triangle:
ctx.moveTo(75, 0); ctx.lineTo(150, 150); ctx.lineTo(0, 150);
ctx.fillStyle = grad;
ctx.fill();

<canvas/>

使用合成技术的动画版

var ctx = document.querySelector("canvas").getContext("2d"),
    grad = ctx.createLinearGradient(0, 0, 0, 150),
    step = grad.addColorStop.bind(grad), // function reference to simplify
    dlt = -3, y = 150;

step(0, "red");     // start of red
step(1/3, "red");   // end of red at 1/3
step(1/3, "gold");  // start of gold at 1/3
step(2/3, "gold");  // end of gold at 2/3
step(2/3, "blue");  // start of blue at 2/3
step(1, "blue");    // end of blue at 3/3

// store a triangle path - we'll reuse this for the demo loop
ctx.moveTo(75, 0); ctx.lineTo(150, 150); ctx.lineTo(0, 150);

(function loop() {
  ctx.globalCompositeOperation = "copy";  // will clear canvas with next draw

  // Fill the previously defined triangle path with any color:
  ctx.fillStyle = "#000";  // fill some solid color for performance
  ctx.fill();
  
  // draw a rectangle to clip the top using the following comp mode:
  ctx.globalCompositeOperation = "destination-in";
  ctx.fillRect(0, y, 150, 150 - y);

  // now that we have the shape we want, just replace it with the gradient:
  // to do that we use a new comp. mode
  ctx.globalCompositeOperation = "source-in";
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, 150, 150);
  
  y += dlt; if (y <= 0 || y >= 150) dlt = -dlt;  
  requestAnimationFrame(loop);
})();

<canvas/>

用于动画的缓存渐变图像（推荐）

var ctx = document.querySelector("canvas").getContext("2d"),
    tcanvas = document.createElement("canvas"),    // to cache triangle
    tctx = tcanvas.getContext("2d"),
    grad = tctx.createLinearGradient(0, 0, 0, 150),
    step = grad.addColorStop.bind(grad), // function reference to simplify
    dlt = -3, y = 150;

step(0, "red");     // start of red
step(1/3, "red");   // end of red at 1/3
step(1/3, "gold");  // start of gold at 1/3
step(2/3, "gold");  // end of gold at 2/3
step(2/3, "blue");  // start of blue at 2/3
step(1, "blue");    // end of blue at 3/3

// draw triangle to off-screen canvas once.
tctx.moveTo(75, 0); tctx.lineTo(150, 150); tctx.lineTo(0, 150);
tctx.fillStyle = grad; tctx.fill();

(function loop() {
  ctx.clearRect(0, 0, 150, 150);

  // draw clipped version of the cached triangle image
  if (150-y) ctx.drawImage(tcanvas, 0, y, 150, 150 - y, 0, y, 150, 150 - y);

  y += dlt; if (y <= 0 || y >= 150) dlt = -dlt;  
  requestAnimationFrame(loop);
})();

<canvas/>

您可以使用渐变 line 改变方向，这决定了渐变的角度。

// vertical 
ctx.createLinearGradient(0, 0, 0, 150); // x1, y1, x2, y2

// hortizontal
ctx.createLinearGradient(0, 0, 150, 0); // x1, y1, x2, y2

// 45° degrees
ctx.createLinearGradient(0, 0, 150, 150); // x1, y1, x2, y2

等等

用一种以上的颜色按程序填充一个形状

Filling a shape procedurally with more than one color

javascript

canvas

paperjs

结果将是

代码和演示

使用合成技术的动画版

用于动画的缓存渐变图像（推荐）