Пользовательский штрих в HTML5 canvas

Question

Можно ли при рисовании линий с помощью элемента холста HTML5 определить стиль обводки линий? В основном в Photoshop и других подобных программах вы можете определить стиль обводки для линий, которые выглядят так, как будто они «нарисованы от руки». Можно ли сделать что-то подобное на холсте HTML5 или я снимаю здесь на Луну?

Спасибо

-Jesse

Answer 1

Возможно, но не по умолчанию. См. Сообщение ShadowCloud о том, что вы можете сделать по умолчанию (очень мало).

В зависимости от того, что вы хотите, это не должно быть слишком сложно.

Если под "нарисованным от руки" вы подразумеваете, что хотите дрожать, вам придется разбивать каждую нарисованную линию / кривую на более мелкие части и добавлять шум к каждой из точек.

Если вам нужна кисть, вам нужно разбить каждую нарисованную линию / кривую на более мелкие части и вызвать drawImage каждые несколько пикселей, чтобы эмулировать кисть фотошопа.

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

Если вы решили реализовать их, и у вас возникли проблемы с разбивкой кривых Безье, и вам нужна помощь, дайте мне знать, и я дам вам код для этого.

Answer 2

В HTML5 Canvas нет стандартного API для управления такими вещами.

Вы можете просто установить цвет или ширину обводки, например:

context.strokeStyle = '#f00'; // red color
context.lineWidth   = 4; // 4px wide

// Draw some rectangles.
context.fillRect  (0,   0, 100, 100);
context.strokeRect(0,   0, 100, 100);

Вы можете попробоватьполучить больше контроля с помощью библиотеки ( Processing.js или Fabric.js )