Question

在使用Canvas做某事时遇到麻烦-我想创建一个仅存在于该形状中的网格。如果它是正方形，我可以创建适合该形状的网格，但是如果该形状是不寻常的形状，我将不知道如何创建网格。

这是我到目前为止所拥有的：我只希望栅格存在于形状中

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(40, 65);
ctx.lineTo(100, 105);

ctx.lineTo(200, 15);
ctx.fillStyle = 'green';
ctx.fill();


function drawGrid(context) {
  context.globalCompositeOperation = 'destination-out   ';

  for (var x = 40.5; x < 300; x += 10) {
    context.moveTo(x, 0);
    context.lineTo(x, 300);
  }

  for (var y = 0.5; y < 501; y += 10) {
    context.moveTo(0, y);
    context.lineTo(300, y);
  }

  context.strokeStyle = "#ddd";
  context.stroke();
}

drawGrid(ctx)

https://jsfiddle.net/fom9gtb6/

Answer 1

context.globalCompositeOperation = 'destination-out   ';

应该是

context.globalCompositeOperation = 'destination-out';

Answer 2

您可以使用context.globalCompositeOperation = 'source-atop';

来自MDN

仅在与现有画布内容重叠的位置绘制新形状。

通过这种方式，strokeStyle实际上用于栅格，而不是擦除destination-out会做的形状的一部分。

创建仅存在于形状内的网格

2 个答案: