Возможности:
текущий статус активного инструмента
цвет и размер кисти, цвет фона
стереть и сбросить
установить, получить и удалить localStorage
сохранить изображение холста
Код Гитхаб
HTML
активный инструмент - это статус текущего инструмента
цвет кисти основан на jscolor, который можно настроить
размер кисти - ползунок от 1 до 50
цвет ведра - цвет фона холста
ластик - это кисть с фоновым цветом
очистить холст для пустого холста
управлять локальным хранилищем
скачать холст на локальный
если размер экрана слишком мал, появится сообщение
связать jscolor.js и script.js
CSS
настроить ползунок размера кисти
стили цветной коробки.
ответное экранное сообщение
JAVASCRIPT
выбрать все DOM
Создайте холст и инициализируйте переменные
щелкните значок кисти, чтобы запустить функцию switchToBrush
значок становится черным, что означает активный и изначально значения из html.
И запустите функцию displayBrushSize
Сделайте размер кисти двумя цифровыми числами. Добавьте ноль, если число одно.
при изменении цвета кисти текущее значение кисти изменяется
при изменении размера кисти текущее значение размера изменяется и форматируется с помощью функции displayBrushSize
при изменении цвета ведра значение цвета ведра изменяется и начинается createCanvas и restoreCanvas
при нажатии ластика текущий цвет устанавливается на цвет фона и размер 50
создать новый холст с заполнением ведра
и запустите функцию switchToBrush, чтобы начать рисовать
начинаем рисовать холст, зацикливаем нарисованный массив
storeDrawn — это функция, которая помещает все числа в массив.
получить ось мыши с помощью getBoundingClintRect()
Когда mousedown, начните рисовать с исходной позиции мыши
При перемещении мыши сохранять текущие данные в массив
когда мышка, закончить
Когда очистите холст, создайте новый холст и очистите массив
сохраните холст в локальном хранилище. передать объект в строку
загрузите холст, если он есть, и перенесите строки в объекты в массив
очистить хранилище с помощью removeItem()
Загрузите холст с помощью toDataURL()
исходное имя загружаемого файла .download
все setTimeout внутри функции
при загрузке сначала creatCanvas()
