В предыдущей статье мы узнали, как использовать Canvas для рисования основных фигур, а в этой статье мы начали делать несколько интересных демонстраций.
На этой гифке показан наш последний проект в статье:
Эффект таков: когда наша мышь перемещается по странице, страница автоматически генерирует траекторию. Это очень распространенная функция в программах для рисования, так как же нам ее достичь?
Прежде всего, мы должны понять основной принцип, то есть такую кривую можно рассматривать как большое количество точек. Если мы нарисуем точку в том месте, где каждый раз проходит мышь, после рисования множества точек подряд точки будут выглядеть как кривая.
Так как же нарисовать точки? Фактически, точка - это круг, как мы уже представляли в предыдущей статье.
Здесь мы можем написать функцию специально для рисования точек:
При рисовании точки нам нужно передать объект context и координаты центра круга извне, а цвет и радиус круга мы устанавливаем сами в функции.
После этого мы должны прослушивать событие onmouseover элемента холста и рисовать точку в текущем положении мыши каждый раз, когда событие запускается.
document.getElementById("canvas").onmousemove = function (event) {
drawPoint(context, event.clientX, event.clientY)
}
Но в приведенном выше коде есть недостаток: мы хотим рисовать, только когда пользователь удерживает мышь, и больше не рисовать, когда мышь опущена. Итак, мы можем оптимизировать приведенный выше код.
Итак, мы можем изменить код на этот:
Больше контента на plainenglish.io
