Цвет CSS часть фона с новым цветом

ProgramBox

Цвет CSS часть фона с новым цветом

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#css #html5-canvas #mask

Вопрос:

У меня есть элемент холста и несколько рисунков внутри этого элемента. чего я хочу добиться, так это изменить цвет некоторых деталей. Фон холста белый, поэтому, возможно, мы сможем добавить маску для окрашивания небелых частей холста. выбранная часть представляет собой прямоугольник, и поэтому форма маски легко достижима. но можно ли изменить цвет некоторых частей холста, которые не являются белыми? заранее спасибо 🙂

P.S. поскольку холст уже заполнен и нарисован, я не могу изменить элементы внутри, если не перерисую все, что займет много времени.

1. Вы можете использовать globalCompositeOperation после чертежа деталь со значением «источник». Не могли бы вы, пожалуйста, добавить сюда какой-нибудь пример, как вы рисуете деталь и чего вы хотите достичь.

2. Это было очаровательно! Как раз то, что я искал, я пробовал маски и клипы, но не смог этого получить. Но «Глобальная композиционная операция» просто сотворила чудо! хотя мне нужно понять, как обрабатывать перекрытия фигур переднего плана… но это был большой шаг вперед. еще раз спасибо. если вы опубликуете его в качестве ответа, я подтвержду, что он принят. еще раз спасибо

Ответ №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;
}

Вы можете расположить элемент в соответствии с вашим выбором.

1. Спасибо за ваш ответ. но я не хочу раскрашивать его полностью. Я просто хочу изменить цвет некоторой части холста (скажем, только прямоугольника внутри него) таким образом, чтобы небелые пиксели внутри этого прямоугольника получили новый цвет.

Ответ №2:

Просто чтобы понять ваши вопросы, вы имеете в виду что-то подобное:

Элементы Холста:

 <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%;
}

Ответ №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>

Метки: Цвет CSS часть фона с новым цветом