В этой статье в основном представлены:
Название: Умная доска для рисования
Стек технологий: HTML5, CSS3, JavaScript, мобильные устройства.
Описание функции:
Адрес предварительного просмотра адреса проекта
Предварительный просмотр
Предварительный просмотр ПК:
Предварительный просмотр для мобильных устройств:
Прочитав предварительный просмотр выше и попробовав Smart Drawing Pad , я думаю, что все в порядке. Неважно, очень вы взволнованы или нет, я в любом случае очень взволнован. достигли результатов проекта Я сказал это чушь, теперь можно начинать набирать код для достижения желаемого эффекта! ! !
Примечание. Следующие эффекты проекта в основном связаны с JavaScript. Ниже приведен только код, содержащий идеи реализации , а не весь код .
3. Достигайте результатов проекта шаг за шагом(1) Страница анализа
Благодаря диаграмме вариантов использования мы знаем, какие функции пользователи могут использовать для входа на наш веб-сайт?
Что могут делать пользователи:
(2) HTML-макет
Когда я писал HTML, я вводил файлы CSS и JS.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Smart Drawing Pad</title> <link rel=shortcut icon href=./image/favicon.png type=image/x-icon> <link rel=stylesheet href=./css/style.css></head><body> <canvas id=canvas></canvas> <div class=bg-btn></ div> <div class=color-group id=bgGroup> <h3>Выбрать цвет фона:</h3> <ul class=clearfix> <li class=bgcolor-item style=background-color: blue;></li> <li class=bgcolor-item style=background-color: black;></li> <li class=bgcolor-item style=background-color: #FF3333;></li> <li class=bgcolor-item style=background-color: #0066FF;></li> <li class=bgcolor-item style=background-color: #FFFF33;></li> <li class=bgcolor-item style=background-color: #33CC66;></li> <li class=bgcolor-item style=background-color: grey;></li> <li class=bgcolor-item style=background- цвет: #F34334;></li> <li class=bgcolor-item style=background-color: #fff;box-shadow: 0 1px 2px 0 rgba(32,33,36,0.28);></li> <li class=bgcolor-item style=background-color: #9B27AC;></li> <li class=bgcolor-item style=background-color: #4CB050;></li> <li class=bgcolor-item style=background-color: #029688;></li> </ul> <i class=closeBtn></i> </div> <div class=tools> <div class=container> <button class=save id=save <button class=brush active id=brush <button class=eraser id=eraser < button class=clear id=clear <button class=undo id=undo <button class=redo id=redo </div> </div> <div class=pen-detail id=penDetail> <i class=closeBtn></i> <p>Размер пера</p> <span class=circle-box><i id=thickness></i></span> <input type=range id=range1 min=1 max=10 value=1> <p>Цвет пера</p> <ul class=pen-color Clearfix> <li class=color-item active style=background-color: black;></ ли> <ли class=color-item style=background-color: #FF3333;></li> <li class=color-item style=background-color: #99CC00;></li> <li class=color-item style=background -color: #0066FF;></li> <li class=color-item style=background-color: #FFFF33;></li> <li class=color-item style=background-color: #33CC66;></li> </ul> <p>Непрозрачность</p> <i class=showOpacity></i> <input type=range id=range2 min=1 max=10 value=1> < / div> <script src=./js/main.js></script></body></html>
(3) Используйте CSS, чтобы украсить интерфейс.
CSS-код может украсить интерфейс в соответствии с личными привычками, поэтому я не буду здесь писать CSS-код. Вы можете напрямую посмотреть код проекта или просмотреть элементы из инструментов разработчика. Если у вас есть какие-либо вопросы, вы можете поговорить со мной лично, я не думаю, что это большая проблема.
(4) Используйте JS для реализации конкретных функций проекта.
1. Подготовка
Сначала подготовьте контейнер, который представляет собой чертежную доску. Контейнер был написан в предыдущем HTML. Это чистая ерунда.
<canvas id=canvas></canvas>
Затем инициализируйте js
let Canvas = document.getElementById('canvas');let context = Canvas.getContext('2d'); Я планирую сделать артборд полноэкранным, поэтому далее я задаю ширину и высоту canvas
пусть pageWidth = document.documentElement.clientWidth; пусть pageHeight = document.documentElement.clientHeight;canvas.width = pageWidth;canvas.height = pageHeight;
Поскольку некоторые IE не поддерживают canvas , если мы хотим быть совместимыми с IE, мы можем создать canvas , затем инициализировать его с помощью excanvas и добавить exCanvas.js для IE. Мы явно не рассматриваем здесь IE.
Но когда я меняю окно браузера на своем компьютере, доска для рисования не масштабируется адаптивно. Решение:
// Не забудьте выполнить функцию autoSetSize function autoSetSize(){ CanvasSetSize(); // При выполнении этой функции ширина и высота холста будут установлены первыми function CanvasSetSize(){ let pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; Canvas.width = pageWidth; Canvas.height = pageHeight } // После изменения размера окна будет запущено событие изменения размера для сброса ширины и высоты холста window.onresize = function(){ CanvasSetSize() }};2. Реализуйте функцию рисования.
Идея реализации: слушать события мыши и использовать метод drawLine() для отрисовки записанных данных.
painting = false .mousedown ), установите для painting значение true , что указывает на то, что рисование выполняется, а мышь не отпускают. Записывайте щелчки мыши.mousemove ). Если мышь движется слишком быстро, браузер не успевает за скоростью рисования, и между точками появляются пробелы, поэтому нам нужно соединить нарисованные точки линиями ( lineTo() ).mouseup ), установите для painting значение false . Примечание. Метод drawCircle на самом деле писать не нужно. Это просто для того, чтобы все поняли, с чего начинать кликать?
function ListenToUser() { // Определить переменную для инициализации состояния кисти let Painting = false // Записать последнее положение кисти let LastPoint = {x: undefine, y: undefine} // Событие нажатия мыши Canvas.onmousedown; = функция (e) {картина = true; пусть x = e.clientX; пусть y = e.clientY = {'x':x,'y':y}; drawCircle(x,y,5); } //Событие перемещения мыши Canvas.onmousemove = function(e){ if(painting){ let x = e.clientX; let y = e.clientY; let newPoint = {'x'; :x,'y':y}; drawLine(lastPoint.x, LastPoint.y, newPoint.x, newPoint.y); LastPoint = newPoint } }; Событие освобождения мыши Canvas.onmouseup = function(){ Painting = false }}// Функция рисования точки function drawCircle(x,y,radius){ // Создаем новый путь. После генерации команда рисования графики указывает на объект. путь Создать путь. context.beginPath(); // Рисуем дугу (круг) с (x, y) в качестве центра и радиусом в качестве радиуса, // начиная с startAngle и заканчивая endAngle, в направлении, заданном против часовой стрелки (по умолчанию — по часовой стрелке). ) для генерации. context.arc(x,y,radius,0,Math.PI*2); // Генерируем сплошное изображение, заполняя область содержимого пути context.fill(); // После закрытия пути изображение Команда рисования перенаправляется в контекст middle. context.closePath();}function drawLine(x1,y1,x2,y2){ //Установим ширину линии context.lineWidth = 10 //Установим стиль конца линии. context.lineCap = round; // Устанавливаем стиль соединения строк context.lineJoin = round; // moveTo(x,y) перемещает обводку в указанные координаты x и y context.moveTo(x1,y1 ); / lineTo(x, y) рисует прямую линию от текущей позиции до заданной позиции x и y context.lineTo(x2,y2); // Рисуем контур изображения через линии context.stroke(); context.closePath();}3. Реализовать функцию ластика
Идеи реализации:
eraserEnabled = false .click ластика, щелкните ластик, измените состояние ластика, eraserEnabled = true и переключите класс для достижения активированного эффекта.eraserEnabled установлено значение true , переместите мышь и используйте context.clearRect() для реализации ластика. Но я обнаружил, что в API холста метод ClearRect может очищать пиксели, но метод ClearRect очищает прямоугольную область. В конце концов, ластики большинства людей привыкли к круглой форме, поэтому введена мощная функция области отсечения. это метод клипа. Следующий код использует context.clearRect() для реализации ластика. Пожалуйста, ознакомьтесь с пошаговым разделом, чтобы узнать, как лучше использовать каучуковую сассафрас.
let Eraser = document.getElementById(eraser);let EraserEnabled = false;// Не забудьте выполнить функцию ListenToUser function listToUser() { // ... означает, что ранее написанный код опущен // ... // Нажатие мыши Следующее событие Canvas.onmousedown = function(e){ // ... if(eraserEnabled){//Чтобы использовать ластик context.clearRect(x-5,y-5,10,10) }else{ LastPoint = {'x':x,'y':y} } } // Событие перемещения мыши Canvas.onmousemove = function(e){ let x = e.clientX; let y = e.clientY; if( !painting){return} if(eraserEnabled){ context.clearRect(x-5,y-5,10,10 }else{ var newPoint = {'x':x,'y':y}; drawLine(lastPoint.x, LastPoint.y,newPoint.x, newPoint.y); LastPoint = newPoint; } // ...}// Щелкните ластик Eraser.onclick = функция () { EraserEnabled = true; Eraser.classList.add ('активный'); Brush.classList.remove ('активный');}4. Внедрить функцию очистки экрана.
Идеи реализации:
Получите узел элемента.
Нажмите кнопку «Очистить», чтобы очистить холст.
let reSetCanvas = document.getElementById(clear);//Реализовать очистку экрана reSetCanvas.onclick = function(){ ctx.clearRect(0,0,canvas.width,canvas.height); setCanvasBg('white');}// Сбросить цвет фона холста function setCanvasBg(color) { ctx.fillStyle = ctx.fillRect(0, 0, холст.ширина, холст.высота);}5. Реализовать функцию сохранения в виде картинки
Идеи реализации:
let save = document.getElementById(save); // Загрузка изображения save.onclick = function() { let imgUrl = Canvas.toDataURL('image/png'); let saveA = document.createElement('a'); body.appendChild(saveA); saveA.href = imgUrl; saveA.download = 'mypic'+(new Date).getTime(); saveA.target = '_blank'; saveA.click();}6. Реализовать функцию изменения цвета фона
Идеи реализации:
let selectBg = document.querySelector('.bg-btn'); let bgGroup = document.querySelector('.color-group'); let bgcolorBtn = document.querySelectorAll('.bgcolor-item'); let penDetail = document. getElementById(penDetail);let activeBgColor = '#fff';//реализовано переключение цвета фона для (let i = 0; i < bgcolorBtn.length; i++) { bgcolorBtn[i].onclick = function (e) { // Остановка всплывания e.stopPropagation(); for (let i = 0; i < bgcolorBtn.length; я++) { bgcolorBtn[i].classList.remove(active); this.classList.add(active); this.style.backgroundColor; setCanvasBg(activeBgColor); }}document.onclick = function(){ bgGroup.classList.remove('active');}selectBg.onclick = function(e){ bgGroup.classList.add(' активный'); e.stopPropagation();}7. Реализовать функцию изменения толщины кисти.
Идеи реализации:
let range1 = document.getElementById('range1');let lWidth = 2;let ifPop = false;range1.onchange = function(){ console.log(range1.value); console.log(typeof range1.value) толщина. style.transform = 'scale('+ (parseInt(range1.value)) +')'; console.log(thickness.style.transform) lWidth = parseInt(range1.value*2);}// Функция рисования линий function drawLine(x1,y1,x2,y2){ // ... context.lineWidth = lWidth; // ...}// Щелкните кисть Brush; . onclick = function(){ EraserEnabled = false; Brush.classList.add('active'); Всплывающее окно console.log('pop') penDetail.classList.add('active'); }else{ penDetail.classList.remove('active'); ifPop = !ifPop;}8. Реализовать функцию изменения цвета кисти
Идея реализации аналогична изменению цвета фона чертежной доски .
let aColorBtn = document.getElementsByClassName(color-item);getColor();function getColor(){ for (let i = 0; i < aColorBtn.length; i++) { aColorBtn[i].onclick = function () { for ( пусть я = 0; я <aColorBtn.length я++) { aColorBtn[i].classList.remove(active); this.classList.add(active); activeColor = this.style.backgroundColor; ctx.fillStyle = activeColor; ctx.strokeStyle = activeColor;9. Реализовать функции отмены и повтора изменений.
Идеи реализации:
canvasHistory каждый раз, когда завершается операция рисования (используйте метод холста toDataURL() для создания снимка, который генерирует изображение в формате Base64);canvasHistory используя метод холста drawImage() ; let undo = document.getElementById(undo);let redo = document.getElementById(redo);// ...canvas.onmouseup = function(){ Painting = false; CanvasDraw();}let CanvasHistory = [];let Step = -1; // Функция рисования CanvasDraw(){ Step++; if(step < CanvasHistory.length){ CanvasHistory.length = Step; // Обрезать массив} // Добавляем новую отрисовку в историю CanvasHistory.push(canvas.toDataURL());}//Отменить метод function CanvasUndo(){ if(step > 0){ step--; // ctx.clearRect(0,0,canvas) .width,canvas.height); пусть CanvasPic = новое изображение(); CanvasPic.src = CanvasHistory[step]; ctx.drawImage(canvasPic, 0, 0); } undo.classList.add('active'); }else { undo.classList.remove('active'); alert('Невозможно продолжить отмену'); / Повторить метод function CanvasRedo(){ if(step <canvasHistory.length - 1){step++; let CanvasPic = new Image(); CanvasHistory[step]; CanvasPic.onload = function () { // ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(canvasPic, 0, 0); redo.classList.add( 'active'); }else { redo.classList.remove('active') alert('Уже последняя запись'); }}undo.onclick = function(){ CanvasUndo();}redo.onclick = function(){ CanvasRedo();}10. Совместимость с мобильными терминалами.
Идеи реализации:
true , используется событие touch , false , используется событие mouse ; // ...if (document.body.ontouchstart !== undefined) { // Используем событие касания anvas.ontouchstart = function (e) { // Начинаем касаться} Canvas.ontouchmove = function (e) { // Начинаем скольжение } Canvas.ontouchend = function () { // Конец скольжения }}else{ // Использовать событие мыши // ... } // ... 4. Преодоление ловушек Проблема 1: Когда вы меняете окно браузера на своем компьютере, доска для рисования не адаптируется.Решение:
При обработке события ответа onresize полученные параметры размера страницы являются измененными параметрами.
Когда размер окна изменится, сбросьте ширину и высоту холста. Проще говоря, после изменения окна переназначьте Canvas.width и Canvas.height.
// Не забудьте выполнить функцию autoSetSize function autoSetSize(){ CanvasSetSize(); // При выполнении этой функции ширина и высота холста будут установлены первыми function CanvasSetSize(){ let pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; Canvas.width = pageWidth; Canvas.height = pageHeight } // После изменения размера окна будет запущено событие изменения размера для сброса ширины и высоты холста window.onresize = function(){ CanvasSetSize() }}; Вопрос 2: Если ширина нарисованной линии относительно небольшая, это нормально, но если она станет толще, возникнут проблемы.Решение: Посмотрите документацию и разберитесь в методе. Нужно просто доработать код рисования линий .
// Функция рисования линии function drawLine(x1,y1,x2,y2){ context.beginPath(); context.lineWidth = lWidth //-----Add----- // Устанавливаем стиль конца линии. context.lineCap = round; // Устанавливаем стиль соединения строк context.lineJoin = round; //-----Join----- context.moveTo(x1,y1); context.lineTo( x2, y2); context.stroke(); context.closePath();} Вопрос 3: Как добиться круглой резиновой сассафрасы?Решение:
В API холста метод ClearRect может очищать пиксели, но метод ClearRect очищает прямоугольную область. В конце концов, ластики большинства людей привыкли к круглой форме, поэтому введена мощная функция области отсечения, то есть метод обрезки. Использование очень простое:
ctx.save()ctx.beginPath()ctx.arc(x2,y2,a,0,2*Math.PI);ctx.clip()ctx.clearRect(0,0,canvas.width,canvas.height) ;ctx.restore();
Приведенный выше код реализует стирание круговой области, то есть сначала реализует круговой путь, затем использует этот путь в качестве области отсечения, а затем очищает пиксели. Следует отметить, что вам необходимо сначала сохранить среду рисования и сбросить среду рисования после очистки пикселей. Если вы не выполните сброс, будущие рисунки будут ограничены этой областью обрезки.
Вопрос 4: Как обеспечить совместимость с мобильными терминалами?1.Добавьте метатег
Поскольку браузер изначально масштабирует страницу, когда она отображается на мобильном телефоне, мы можем установить мета-атрибут области просмотра в мета-теге, чтобы браузер не масштабировал страницу. Ширина страницы = ширина экрана пользовательского устройства.
<мета-имя=окно просмотра content=width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0/>/*Page width=Mobile width:width=device-width Пользователь не может масштабировать: user-scalable=без масштабирования: начальный масштаб=1 максимальный масштаб: максимальный масштаб=1,0 минимальный масштаб: минимальный масштаб=1,0*/
2. Почти все сенсорные события используются на мобильной стороне, в отличие от ПК.
Поскольку мобильная сторона использует события касания, используются атрибуты H5 touchstart/touchmove/touchend. Однако сторона ПК поддерживает только события мыши, поэтому требуется обнаружение функции.
В событии touch координаты получаются через .touches[0].clientX и .touches[0].clientY , которые следует отличать от события mouse .
Ну, это не большая проблема. Просто я пропустил написание context.beginPath() и потратил некоторое время на решение этой ошибки. Это напоминает мне, что есть десятки миллионов строк кода, и первая строка; комментарии не стандартизированы, программирование не стандартизировано, а у коллеги две строчки, лучше действовать по документально оформленным техническим условиям, это так приятно пахнет! ! !
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.