HTML5 canvas - проблема непрозрачности с приложением рисования - PullRequest
1 голос
/ 09 июля 2011

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

Я пробовал два варианта:

a.Путь начинается, когда мышь в первый раз нажата, и заканчивается, когда мышь снова поднимается: каждое движение мыши вызывает функцию stroke ().Поскольку линия прозрачна, начало всего пути станет непрозрачным, а конец - нет, потому что stroke () вызывается много раз и повторяет весь путь снова и снова.

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

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

что я могу сделать?

спасибо

1 Ответ

6 голосов
/ 09 июля 2011

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

Во время перетаскивания мышью для каждого события mousemove используйте clearRect ()очистите свой холст наложения и затем нарисуйте весь ход выполнения.

Когда вы получите mouseup, очистите оверлей и нарисуйте весь штрих к основному холсту.

Вотживой пример:

http://jsfiddle.net/rnNFB/1/

...