对圆形和线条使用相同的不透明度和颜色，但在画布上显示奇怪的结果[重复]

Posted 2023-03-24

【中文标题】对圆形和线条使用相同的不透明度和颜色，但在画布上显示奇怪的结果[重复]

【英文标题】：use the same opacity and color for circle and line but shows a weird result on canvas [duplicate]

【发布时间】：2022-01-18 05:29:42

【问题描述】：

我对画布上的线条和圆圈使用相同的颜色，但是，它给了我一种奇怪的效果。我希望它不显示圆圈中的线条。

为什么添加 alpha 值会产生如此大的差异？

这是我的代码：

        function draw() 
            
            let color = "rgba(192,192,192,0.5)";
            
            //draw circle
            for (let i = 0; i < circleArray.length; i++) 
                
                let circle = circleArray[i]
                
                
                context.beginPath();
                context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
                context.fillStyle = color;
                context.fill();
            ;
            
            //draw line
            context.beginPath();
            for (let i = 0; i < circleArray.length; i++) 
                let circleI = circleArray[i];
                context.moveTo(circleI.x, circleI.y);

                for (let j = 0; j < circleArray.length; j++) 
                    let circleII = circleArray[j];
                    if (distance(circleI, circleII) < 350) 
                        context.lineTo(circleII.x, circleII.y);
                    
                
            
            
            context.lineWidth = 2;
            context.strokeStyle = color;
            context.stroke();
        

这就是我现在所拥有的。

预期。这就是我想要的，但它的不透明度为 1。我希望它的不透明度为 0.5。

【参考方案1】：

我知道您可以使用 Path2D 创建一条路径，让所有内容都获得相同的 alpha 值... 可以做复杂的形状，代码如下：

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "rgba(192,192,192,0.5)";

let cArray = [x:25, y:10, x:25, y:35, x:45, y:35, x:45, y:55, x:65, y:55]

let path = new Path2D()
for (let i = 0; i < cArray.length; i++) 
  path.arc(cArray[i].x, cArray[i].y, 15, 0, Math.PI * 2);
  path.closePath()
;

context.fill(path);

<canvas id="canvas"></canvas>

但如果我们混合填充和描边，它看起来不像你想要的那样...... 也许将这种方法与 Path2D 一起使用并绘制矩形而不是线条？