При изменении fillStyle пути на холсте цвет фактически не меняется

javascript canvas alphablending

532 просмотра

1 ответ

180 Репутация автора

Я пытаюсь изменить fillStyle пути на полностью прозрачный, но вместо этого я получаю смешанные цвета.

/*****************************
ALL BELOW JUST SIMULATING CASE
*****************************/
var c1 = document.getElementById("cool");
var ctx = c1.getContext("2d")

var elem=[0,0,50,0,100,0];
var elem2=[50,0,50,50,50,100];

var i=1;

var path = new Path2D();
path.moveTo(elem[i+1], elem[i+2]);
path.lineTo(elem2[i+1], elem2[i+2]);
path.lineTo(elem2[i-1], elem2[i]);
path.lineTo(elem[i+1], elem[i+2]);
path.closePath();

ctx.fillStyle = getRndColor();
ctx.strokeStyle = ctx.fillStyle;
ctx.fill(path);
ctx.stroke(path);

//this function shouldn't have impact on problem, but i put it here just in case
var getRndColor = function () {
    var r = 255*Math.random()|0,
        g = 255*Math.random()|0,
        b = 255*Math.random()|0;
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

/*****************************
ALL ABOVE JUST SIMULATING CASE
*****************************/

var changeElement = function(path) {
    ctx.fillStyle = "rgba(0,0,0,0)";
    ctx.strokeStyle = ctx.fillStyle;
    ctx.fill(path);
    ctx.stroke(path);
    console.log(ctx.fillStyle);
}

changeElement(path); //if you try e.g. 50% opacity, you will see that color blends

Как изменить путь fillStyle? Можно ли очистить не прямоугольную область холста?

Автор: jazzgot Источник Размещён: 18.07.2016 08:35

Ответы (1)


1 плюс

180 Репутация автора

Решение

Хорошо, вот и приходит простое решение. Большое спасибо Калидо .

В моем случае я мог просто изменить globalCompositeOperationзначение на source-inи затем я мог бы изменить цвет (и непрозрачность) вместо смешивания цветов.

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

Мой пример кода:

var changeElement = function(path) {
    ctx.globalCompositeOperation = "source-in";
    ctx.fillStyle = "rgba(0,0,0,0)";
    ctx.strokeStyle = ctx.fillStyle;
    ctx.fill(path);
    ctx.stroke(path);
    ctx.globalCompositeOperation = "source-over"; //setting back to default value to prevent odd behavior of other part of canvas.
}

changeElement(path);
Автор: jazzgot Размещён: 31.07.2016 12:22
Вопросы из категории :
32x32