Прозрачность закрашенного штриха в HTML5 - PullRequest
8 голосов
/ 10 февраля 2012

Я работаю над приложением для рисования в HTML5, и я хотел бы сделать что-то особенное. Идея состоит в том, чтобы нарисовать путь, и он будет закрыт и заполнен выбранным цветом (цвет обводки). Он хорошо работает со сплошными цветами, но если я хочу сделать прозрачный штрих и заливку, я сталкиваюсь с этой проблемой: http://imgur.com/0N3MW

Что происходит, заливка выполняется до середины обводки (фактической точки выборки пути), поэтому внутри фигуры есть линия, равная половине размера обводки, которая темнее, потому что это пересечение заливки ход.

Видите ли вы обходной путь для этого?

К сожалению, я не могу сейчас публиковать сообщения в JSFiddle, потому что он находится в режиме READ ONLY. Но вы должны увидеть, о чем я говорю, вживую в этой песочнице: http://bit.ly/AbaMLl (Веб-сайт и библиотека не имеют отношения к тому, что я использую, это всего лишь найденный мною холст)

Любые идеи / предложения приветствуются:)

Ответы [ 3 ]

11 голосов
/ 10 февраля 2012

Конечно, используйте ctx.globalCompositeOperation = 'destination-atop';, и оно должно выглядеть так, как вы ожидаете.

Примерно так: http://jsfiddle.net/UcyX4/

(Выньте эту строку, чтобы увидеть проблемуу вас есть)

Предполагая, что это не единственная вещь, нарисованная на холсте, вам, вероятно, придется нарисовать это на временном холсте, а затем нарисовать этот холст на вашем обычном, иначе это может испортить всеранее нарисованные фигуры.Поэтому вам понадобится такая система: http://jsfiddle.net/dATfj/

edit: код вставлен в случае сбоя jsfiddle:

html:

<canvas id="canvas1" width="500" height="500"></canvas>

script:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
ctx2 = can2.getContext('2d');

ctx.strokeStyle = 'rgba(0,0,0,0.7)';
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.lineWidth = 10;


// Stuff drawn normally before
// Here I draw one rect in the old way just to show the old way
// and show something on the canvas before:
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();


// Draw on can2 then draw can2 to can
ctx2.strokeStyle = 'rgba(0,0,0,0.7)';
ctx2.fillStyle = 'rgba(0,0,0,0.7)';
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();

ctx.drawImage(can2, 0, 0);
4 голосов
/ 20 июня 2018

2018 ответ: используйте context.globalAlpha

ex: context.globalAlpha = 0.2;

4 голосов
/ 27 мая 2014

В то время ответ Саймона был верным, но теперь кажется, что Chrome 36 исправил ошибку, которая влияет на его решение, и он больше не работает. Это уже не работает в Firefox, и, похоже, это ожидаемое поведение: https://bugzilla.mozilla.org/show_bug.cgi?id=898375

Итак, как вы это сделали?
Сначала вам нужен еще один холст.
Нарисуйте свою заполненную и обведенную форму на этом холсте без непрозрачности (не в цвете и без globalAlpha).
Теперь нарисуйте и установите globalAlpha на своем основном холсте.
Нарисуйте первый холст на своем главном.
Установите глобальную альфу на то, что у вас было на основном холсте.
Готово.

...