Как сделать, чтобы прозрачность была виднее?

Question

[0x0000002F]

По-прежнему роюсь в чужом коде.
Теперь проблема в том, что если в цвете ctx.strokeStyle есть степень прозрачности, то при рисовании она становится незаметной (заметная только в конце линии). Надо, чтобы вся линия была полупрозрачной
Демо:


Вот код:

// примерно такие события
canvas.onmousedown = () => flag = true;
canvas.onmouseup = () => flag = false;
canvas.onmousemove = e => drawPencil(e);

function drawPencil(e){

	//if the mouse button is pressed down,draw the mouse moving trace.
	if(flag)
	{
		 var offset = $("#myCanvas").offset();
		 var x = e.pageX-offset.left;
		 var y = e.pageY-offset.top;
		 $("#show").html(x + ", " + y+"  "+e.which);
		 ctx.lineTo(x,y);
		 ctx.stroke();
	}
	else
	{
		// set the begin path for brash
		ctx.beginPath();
		var offset = $("#myCanvas").offset();
		var x = e.pageX-offset.left;
		var y = e.pageY-offset.top;
		ctx.moveTo(x,y);
	}
}

Comments

[twobomb]

Ну потому-что вы с каждым движением мыши рисуете линию заново, и полупрозрачности складываются и получается и получается непрозрачность. Вам нужно очищать холст перед каждой перерисовкой.
P.S. можно делать каждый раз beginpath moveto lineto ну тогда будут некрасивые соединения линий

[WbICHA]

0x0000002F

Хммм... Кого-то он мне напоминает.)

[0x0000002F]

twobomb, Если очищать холст, то прошлые слои сотрутся. А если делать через beginPath + moveTo, то в месте стыка линий образуются точки.

[0x0000002F]

WbICHA, и кого же? :D

[WbICHA]

0x0000002F, тебе надо хранить точки и отрисовывать их как одну кривую линию, а не как много прямых.

ctx.strokeStyle = "#0005";
ctx.lineWidth = 20;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();

[0x0000002F]

WbICHA, Это как раз первоначальный вариант. Только stroke вызывается после каждой линии, чтобы была визуализация пера. В этом и проблема, что они наслаиваются каждый раз

[WbICHA]

0x0000002F, в этом-то и проблема, что у тебя неверная реализация. Тебе необходимо хранить все точки в массиве и когда надо что-то отрисовать, тебе надо очищать весь холст и отрисовывать ВСЁ заного.

[twobomb]

WbICHA, на самом деле точки хранить не нужно, так как канвас помнит всё что было после beginPath, собственно поэтому проблема и возникла.
А вот что нужно помнить, так это состояния холста до начала рисования линии.
0x0000002F, Возьмите состояния холста до рисования линии судя по функционалу undo,redo должна быть какая-то история, сначала рисуете это состояние, а потом вызываете stroke чтобы нарисовать линию. Если в истории хранятся действия и придется вызывать beginPath по пути, то тогда конечно эта линия потеряется, и нужно делать как говорит ВЫЧА, хранить координаты точек с момента начала рисования линии и отрисовывать её заново.

[WbICHA]

twobomb, если я всё правильно помню, ундо и редо работают только с настройками холста (цвет закрашивания/линий, размеры и т.д.), то есть в данном случае можно разве что сохранять весь холст и его отрисовывать каждый раз.
Вообще, интересный вариант, однако он всё равно будет актуален разве что со стороны оптимизации, потому что хранить все точки надо не только для нормальной отрисовки, но и для возможности использовать ctrl+z (историю), что, как не крути, очень важная часть пейнта и рано или поздно автор захочет это имплементнуть.

[WbICHA]

twobomb, забыл.

П.с.: "ВЫЧА"? Серьёзно?) Шысна же.)

[twobomb]

WbICHA, тупанул :D

Answer 1

[Alexandroppolus]

В былые времена тоже игрался канвой, пилил свой паинт - демо, кодъ
Потом, конечно, забросил )

Рисование полупрозрачным цветом делается так. Допустим, цвет rgba(R, G, B, A). При нажатии мыши ставишь поверх своей основной канвы другую канву, у которой background: transparent и opacity: A. И вот на ней просто рисуешь цветом rgb(R, G, B). То есть рисуется всё как обычно, а за счет opacity выглядит полупрозрачным. Потом, при отпускании мыши, по готовому набору точек рисуется линия на основной канве, однократно и цветом rgba(R, G, B, A). В моём случае даже не просто рисуется, а упаковывается в команду с методами undo/redo, выполняется и кладется в историю, чтобы уметь в повтор/отмену. Но можно и просто нарисовать.

Comments

[0x0000002F]

Вау, пейнт крутой) Пожалуй, сохраню себе реп.
Но насчет реализации моего - я уже сделал по-своему. При нажатии, перед началом рисования линии, запоминаю текущее состояние холста. Потом рисую линию в нормальном режиме (да, она будет непрозрачной). После отпускания мыши очищаю холст и восстанавливаю состояние, которое было мы запоминали до рисования линии. И заново отрисовываю ту самую линию методом stroke. Из-за того, что мы не начинали новый beginPath и не заканчивали closePath, старая информация о проведенных линиях lineTo осталась и ее можно отрисовать повторно. Из-за того, что мы вызывали stroke каждый раз при вызове события mousemove, новые линии наслаивались на старые и прозрачность становилась незаметной. Теперь это будет происходить только на время процесса рисования линии, - потом она становится такой, какая мне надо.

[Alexandroppolus]

0x0000002F,

Потом рисую линию в нормальном режиме (да, она будет непрозрачной)

то есть линия становится прозрачной только после отпускания мыши?

[0x0000002F]

Alexandroppolus, да. Пусть это будет фичей)) Ведь зато четко видно контур