使用新颜色的背景的 CSS 颜色部分

Posted 2023-03-25

【中文标题】使用新颜色的背景的 CSS 颜色部分

【英文标题】：CSS color part of background with a new color

【发布时间】：2021-09-25 02:58:10

【问题描述】：

我有一个画布元素和该元素内的一些绘图。我想要实现的是改变某些部分的颜色。画布背景是白色的，所以也许我们可以添加一个蒙版来为画布的非白色部分着色。选择的部分是一个矩形，因此很容易实现掩模形状。但是是否可以更改画布某些非白色部分的颜色？ 在此先感谢:-)

附：因为画布已经被填充和绘制了，所以我无法更改里面的元素，除非我重新绘制所有需要花费大量时间的东西。

【问题讨论】：

您可以在绘制具有“source-in”值的零件后使用globalCompositeOperation。您能否在这里添加一些示例，如何绘制零件以及您想要实现的目标。

这太迷人了！正是我要寻找的东西，我尝试过面具和剪辑，但无法得到这个。但是'globalCompositionOperation' 只是发挥了魔力！虽然我必须弄清楚如何处理前景形状的重叠......但这是向前迈出的一大步。再次感谢。如果您将其发布为答案，我将确认它已被接受。再次感谢

【参考方案1】：

好的。我有你的问题。要解决这个问题，您必须在元素内创建嵌套。 然后你可以指定元素的位置，背景颜色。 html 代码：

<div class ="default-div">
<p>This is just for example </p>
<div class = "trial-div"></div>
</div>

css代码：

.default-div
width:500px;
height:500px;

.trial-div
  width:100px;
  height:100px;
  margin-left:300px;
  margin-top:300px;
  background-color:red;

您可以根据自己的选择定位元素。

【讨论】：

感谢您的回复。但我不想完全着色。我只是想更改画布某些部分的颜色（比如其中只有一个矩形），以便该矩形内的非白色像素获得新颜色。

【参考方案2】：

只是为了理解你的问题，你指的是这样的：

画布元素：

<canvas id="bg"  >
</canvas>
<canvas id="fg"  >
</canvas>

CSS：

#bg 
  background-color: red;
  position: absolute;
  z-index: 0;


#fg 
  background-color: white;
  position: absolute;
  z-index: 1;
  border-radius: 50%;

【参考方案3】：

globalCompositeOperation 的使用

在某些情况下您可以使用ctx.globalCompositeOperation，但不幸的是，无法仅隔离您想要的部分。之前的所有图纸都将在构图中起作用。

ctx.globalCompositeOperation 用法的一些示例。 canvas 的前半部分是白色的，其他的是透明的。 圆圈有不同的颜色：灰色、黑色和黑色，不透明度为 0.5。 更改 globalCompositeOperation 选项以查看您在不同情况下得到的结果。

首先绘制圆圈，然后是画布大小的黄色矩形。

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width = 600;
let h = canvas.height = 180;

draw();

document.getElementById('gco-options').addEventListener('change', e => 
        draw(e.target.value);
)


function draw(gco_val='source-in')

    ctx.clearRect(0,0,w,h);
    
    ctx.save();
    
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,w/2,h);
    
    ctx.fillStyle = 'gray';
    ctx.beginPath();
    ctx.arc(120,90,80,0,Math.PI*2);
    ctx.fill();
    
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(300,90,80,0,Math.PI*2);
    ctx.fill();
    
    ctx.fillStyle = 'rgba(0,0,0,0.5)';
    ctx.beginPath();
    ctx.arc(480,90,80,0,Math.PI*2);
    ctx.fill();   
    
    ctx.globalCompositeOperation = gco_val;
    
    ctx.fillStyle = 'yellow';
    ctx.fillRect(0,0,w,h);
    
    ctx.restore();
            
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = 'bold 24px san-serif';
    ctx.fillStyle = 'white';
    ctx.fillText('gray', 120, 90);
    ctx.fillText('black', 300, 90);
    ctx.fillText('rgba(0,0,0,0.5)', 480, 90);
    ctx.strokeText('gray', 120, 90);
    ctx.strokeText('black', 300, 90);
    ctx.strokeText('rgba(0,0,0,0.5)', 480, 90); 
    

<canvas id="canvas"></canvas>
<select id="gco-options" style="position: fixed; top: 5px; left: 5px">
    <option selected>source-in</option>
    <option>source-over</option>
    <option>source-out</option>
    <option>destination-over</option>
    <option>destination-in</option>
    <option>destination-out</option>
    <option>difference</option>
    <option>lighter</option>
    <option>copy</option>
    <option>xor</option>
    <option>multiply</option>
    <option>screen</option>
    <option>overlay</option>
    <option>darken</option>
    <option>lighten</option>
    <option>color-dodge</option>
    <option>color-burn</option>
    <option>hard-light</option>
    <option>soft-light</option>
    <option>exclusion</option>
    <option>hue</option>
    <option>saturation</option>
    <option>color</option>
    <option>luminosity</option>
</select>