HTML5 Canvas剪裁和图层重叠

Question

我试图将两个circular（绿色和红色）剪裁在另一个bottom left形状top内。它可以正常工作，但由于某些原因，您可以在此图片上看到red shape和green shape边缘不平滑（放大）。

我非常确定，因为position位于overlapping之下但位于同一let canvas = document.querySelector('canvas') canvas.width = window.innerWidth canvas.height = window.innerHeight let ctx = canvas.getContext('2d') ctx.scale(10,10) function drawRounded(x,y,w,h,radius) { let K = (4/3)*Math.tan(Math.PI/8) ctx.beginPath() ctx.moveTo(x + radius,y); ctx.lineTo(x + w - radius,y) ctx.bezierCurveTo(x + w + radius*(K-1),y,x + w,y+radius*(1-K),x + w,y+radius); ctx.lineTo(x + w,y + h - radius) ctx.bezierCurveTo(x + w,y+ h + radius*(K-1),x + w + radius*(K-1),y+ h,x +w-radius,y+ h); ctx.lineTo(x + radius,y + h) ctx.bezierCurveTo(x+radius*(1-K),y+ h,x,y+ h+radius*(K-1),x,y+ h-radius); ctx.lineTo(x,y + radius) ctx.bezierCurveTo(x,y+radius*(1-K),x+radius*(1-K),y,x+radius,y); } drawRounded(0,0,100,100,50) ctx.clip(); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,150); ctx.fillStyle="#00FF00"; ctx.fillRect(0,0,80,80); 。如何在不移动形状位置的情况下避免使用此像素{{1}}。

这是我的代码

{{1}}

请参阅我的小提琴测试Here