画布 - 填充使用多个路径创建的形状

Question

我想做什么

我想绘制一个自定义形状（例如一个简单的矩形），每个边缘都有不同的颜色。我可以用四条路径来做，它就像一个魅力。但是，通过这种方式，似乎我无法填补形状。

尝试另一种方式，我可以用一条路径绘制形状并填充它，但在这种情况下，我不能为边缘使用不同的颜色，因为最后fillStyle将覆盖之前的那些，甚至如果我单独描述子路径。

是否可以通过单独着色子路径或填充包含多个路径的形状来混合两者？

Answer 1

使用不同的＆＃34;层＆＃34;在画布上，一个用于填充颜色形状，一个用于每个颜色路径的新颜色，z-index不能在画布上工作，只需确保先绘制下面的内容，然后将所有内容包装在上面一个组<g>标记，以便于操作

Answer 2

经过一些实验，我设法解决了我的问题。它不是一个理想的解决方案，因为它有一些开销，但它工作正常。

在绘图操作的开始，我将目标坐标存储在一个数组中，并一次又一次地绘制整个内容。每次运行都是一条新路径。使用.globalCompositeOperation = "destination-over"我可以在现有的下绘制行，因此每行可以有不同的颜色。

在绘图操作结束时，数组包含形状的所有坐标，因此.fill()方法可以填充路径。

我希望它可以帮助别人：

// get the canvas context
var ctx = document.getElementById("myCanvas").getContext("2d");

// init shape array
var shape = [];
shape.push({
  x: 0,
  y: 0
}); // or any other starting point

// let's try
draw(20, 20);
draw(40, 40);
draw(60, 60);

// this is how we draw
function draw(x, y) {
  // this is important
  // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
  ctx.globalCompositeOperation = "destination-over";

  // this is just to be more visible
  ctx.lineWidth = 10;

  // get a random color
  ctx.strokeStyle = myRandomColor();

  // save target coordinates
  shape.push({
    x: x,
    y: y
  });

  // reset the path
  ctx.beginPath();

  // jump to the start point
  ctx.moveTo(shape[0].x, shape[0].y);

  // draw the whole stuff
  for (var i = 0; i < shape.length; i++) {
    ctx.lineTo(shape[i].x, shape[i].y);
  }
  ctx.stroke();
}

function myRandomColor() {
  var colors = ["red", "green", "blue", "yellow", "pink"];
  var rand = Math.round(Math.random() * 5);
  return colors[rand];
}

<canvas id="myCanvas"></canvas>