【问题标题】：Canvas - Fill a shape created with multiple paths画布 - 填充使用多条路径创建的形状
【发布时间】：2016-08-31 01:54:20
【问题描述】：

我想做什么

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

尝试另一种方式，我可以用一条路径绘制形状并填充它，但是在这种情况下，我不能为边缘使用不同的颜色，因为最后一个 fillStyle 会覆盖以前的，即使我单独描边子路径。

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

【问题讨论】：

多次绘制？一个用于填充，每个边缘单独用于笔触（记得为每个新路径调用 beginPath）
没那么容易。我有一步一步的执行。
你能说得更清楚些吗，可能有一个示例代码？当我读到它的时候，你有一些点可以让你的路径，比如说一个三角形 p1，p2，p3。那你为什么不能fillStyle=c0; beginPath(); moveTo(p1); lineTo(p2); lT(p2); lT(p3); fill(); fS=c1; bP(); mT(p1); lT(p2); stroke(); fS=c2; bP(); mT(p2); lT(p3); stroke(); fS=c3; bP(); mT(p3); lT(p1); stroke();？

标签： javascript canvas turtle-graphics

【解决方案1】：

在画布上使用不同的“图层”，一个用于填充颜色的形状，一个新的用于您拥有的每个颜色路径，z-index 在画布上不起作用，只需确保先绘制下面的内容, 并将所有内容包装在一个组 <g> 标记上以使其更易于操作

【讨论】：

我使用 <canvas> 元素，而不是 SVG。
不需要svg，你也可以在画布上重叠路径
我无法填充形状，因为它在笔画之前不存在。

【解决方案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];
}

&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;

【讨论】：