@0x0000002F

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

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

Вот код:
// примерно такие события
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);
	}
}
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
В былые времена тоже игрался канвой, пилил свой паинт - демо, кодъ
Потом, конечно, забросил )

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы