0

问题是：我想在一个形状中制作一个透明的孔，所以我使用复合模式：destination-out，它允许用第二个形状移除形状的一部分。

在单一形状上没问题。

但是当多个“钻孔”形状重叠时，就没有透明效果了。我知道这是因为这是 globalComposite 和 js canvas 的工作方式......但是，有解决方案吗？我尝试了 clip() 和各种复合选项，但没有找到。

这是预期的结果： https ://i.stack.imgur.com/leVfB.png

这是一个简化的工作 JSFiddle：https ://jsfiddle.net/7y5utsz0/

    // Drawing the shape
    ctx.save();
    ctx.beginPath();            
    ctx.rect(this.x, this.y, this.w, this.h);
    ctx.closePath();    
    ctx.fillStyle = '#'+this.color; 
    ctx.fill(this.path);
    ctx.restore();
    
    // "Drilling" the shape with a circle   
    ctx.save();                 
    ctx.globalCompositeOperation = 'destination-out';   
    ctx.beginPath();        
    ctx.arc(this.x + 30, this.y + 30, 20, 0, Math.PI * 2, false);
    ctx.fillStyle = '#ffffff';
    ctx.fill(); 
    ctx.closePath();
    ctx.restore();

感谢您提供任何解决方案！

4

0 回答 0