如何在画布上的不寻常形状上绘制网格

Question

我正在尝试一种在png图像上绘制网格的方法，以便仅在图像的一部分上绘制网格。

我不希望页面上任何非形状的部分都带有网格。

您如何做到的？

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(40, 205);
ctx.lineTo(300, 25);
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 < 301; y += 10) {
    context.moveTo(0, y);
    context.lineTo(300, y);
  }

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

drawGrid(ctx)

https://jsfiddle.net/m8679fk4/2/

Answer 1

首先，将复合操作更改为目的地 并在 context.drawImage（img，0，0）; 之后紧接着将对 drawGrid（context）; 的调用放入onload处理程序中-否则可能会绘制网格在图片加载完成之前。