如何在Konva.js中批量实现复杂图片形状裁剪并解决渲染问题？

你遇到的问题是因为修改Canvas全局上下文的globalCompositeOperation后未恢复，Konva所有节点共享同一上下文，后续节点会继承修改后的状态，导致渲染错位。

只需在sceneFunc中添加上下文状态的保存与恢复即可解决：

const mask = new Konva.Shape({
  id: KONVA_NODE_ID.MASK,
  x: 0.5 * width * (1 - range),
  y: 0.5 * height * (1 - range),
  width: width * range,
  height: height * range,
  sceneFunc: function (context, shape) {
    context.save(); // 保存当前上下文状态
    context.drawImage(imageObj, 0, 0, shape.width(), shape.height())
    context.globalCompositeOperation = 'source-in'
    context.drawImage(backObj, 0, 0, shape.width(), shape.height())
    context.restore(); // 恢复上下文，不影响其他节点
  },
  hitFunc: function (context, shape) {
    context.fillStrokeShape(shape)
  },
})
group.add(mask)

context.save()会将当前上下文的所有状态（复合操作、变换、样式等）暂存，context.restore()则恢复到之前的状态，确保每个Shape的上下文修改都是独立的，不会干扰其他节点的渲染逻辑。

批量创建这类遮罩节点时，只要每个Shape的sceneFunc都遵循这个流程，就能避免位置偏移和渲染错误。

内容的提问来源于stack exchange，提问作者Norman Yonion Chen