CSS颜色使用新颜色的背景部分
CSS颜色使用新颜色的背景部分
提问于 2021-07-16 17:30:27
我有一个画布元素，元素里面有一些图画。我想要实现的是改变一些部件的颜色。画布背景是白色的，所以也许我们可以添加一个蒙版来给画布的非白色部分上色。选择的部分是一个矩形，因此蒙版形状很容易实现。但是有没有可能改变画布上某些非白色部分的颜色呢？提前感谢:-)
另外，因为画布已经被填充和绘制，所以我不能更改其中的元素，除非我重新绘制所有内容，这将花费很多时间。
回答 3
Stack Overflow用户
发布于 2021-07-16 18:00:07
好的。我明白你的问题了。要解决此问题，必须在元素中创建嵌套。然后，您可以指定元素的位置、背景颜色。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;
}您可以根据自己的选择放置元素。
Stack Overflow用户
发布于 2021-07-16 21:23:10
为了理解你的问题，你是指这样的东西吗：
画布元素：
<canvas id="bg" width="640" height="480">
</canvas>
<canvas id="fg" width="300" height="300">
</canvas>CSS:
#bg {
background-color: red;
position: absolute;
z-index: 0;
}
#fg {
background-color: white;
position: absolute;
z-index: 1;
border-radius: 50%;
}Stack Overflow用户
发布于 2021-07-17 18:36:21
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68406722
复制相关文章
相似问题
腾讯云开发者
