С тех пор, как я начал работать, я писал о vue, реагировании, обычных правилах, алгоритмах, небольших программах и т. д., но никогда не писал о холсте, потому что действительно не умею!
В 2018 году я поставил перед собой небольшую цель: изучить холст и добиться эффекта от использования холста для создания некоторых анимаций, которых нелегко добиться с помощью CSS3.
Эта статья — первая польза от изучения холста. Первая демонстрация, которую делают многие люди при изучении холста, — это реализация часов. Конечно, я тоже их реализовал, но вместо того, чтобы говорить об этом, я расскажу о более интересном и простом. один.
Удерживайте кнопку мыши, чтобы нарисовать траекторию. нуждатьсяНа холсте в исходном состоянии ничего нет. Теперь я хочу добавить на холст несколько событий мыши и использовать мышь для письма на холсте. Конкретный эффект заключается в том, чтобы переместить мышь в любую точку холста, затем, удерживая ее, переместите ее, и вы сможете начать писать!
принципДавайте вкратце разберем идею: сначала нам нужен холст, затем вычислим положение мыши на холсте, привяжем к мыши событие onmousedown и onmousemove и прорисуем путь во время движения. рисунок заканчивается.
Хотя эта идея очень проста, есть некоторые части, для реализации которых требуются некоторые хитрости.
1. Требуется html-файл, содержащий элементы холста.
Это холст шириной 800 и высотой 400. Почему ты не написал px? Ой, я пока не понимаю, это рекомендовано документом Canvas.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-совместимый контент=ie=edge> <title>обучение холста< /title> <meta name=description content=> <meta name=viewport content=width=ширина устройства, начальный масштаб=1> <link rel=manifest href=site.webmanifest> <link rel=apple-touch-icon href=icon.png> <link rel=stylesheet href=css/main.css> </head> <body> <canvas id=theCanvas width=800 height =400></canvas> <script src=js/main.js></script> </body></html>
2. Определите, поддерживает ли текущая среда холст.
В main.js мы пишем самовыполняющуюся функцию. Ниже приведен фрагмент кода для оценки совместимости. Основная часть кода будет основой требований реализации.
(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //Несовместимо с холстом return false } else { //Тело кода}})()3. Получите 2d объект.
пусть context = theCanvas.getContext('2d')4. Получите координаты текущей мыши относительно холста.
Зачем нам нужно получить эту координату? Поскольку мышь по умолчанию получает относительные координаты текущего окна, а холст может располагаться в любом месте страницы, для получения реальных координат мыши необходимы вычисления.
Получение реальных координат мыши относительно холста инкапсулировано в функцию. Если вы чувствуете себя абстрактно, вы можете нарисовать картинку на бумаге, чтобы понять, зачем нужна эта операция.
Обычно это x — rect.left и y — rect.top. Но почему на самом деле x - rect.left * (canvas.width/rect.width)?
Canvas.width/rect.width означает определение поведения масштабирования в холсте и поиск кратного масштабирования.
const windowToCanvas = (canvas, x, y) => { //Получаем некоторые свойства окна расстояния элемента холста, объясненные в MDN let rect = Canvas.getBoundingClientRect() //Параметры x и y передаются соответственно от мыши расстояние между координатами окна, а затем вычтите расстояние между холстом и левой и верхней частью окна. return { x: x - rect.left * (canvas.width/rect.width), y: y - rect.top * (canvas.height/rect.height) }}5. С помощью функции инструмента на шаге 4 мы можем добавлять события мыши на холст!
Сначала привяжите событие onmousedown к мыши и используйте moveTo, чтобы нарисовать начальную точку координат.
theCanvas.onmousedown = function(e) { //Получаем координаты точки нажатия мыши относительно холста. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) // Деструктуризация назначения es6 let { x, y } = ele // Начальная точка рисования. context.moveTo(x, y)}6. При перемещении мыши не происходит длительного нажатия мыши, как это отслеживать?
Здесь используется небольшая хитрость — выполнить событие onmousemove (движение мыши) внутри onmousedown, чтобы можно было отслеживать и перемещать мышь.
theCanvas.onmousedown = function(e) { //Получаем координаты точки нажатия мыши относительно холста. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) // Деструктуризация назначения es6 let { x, y } = ele // Начальная точка рисования. context.moveTo(x, y) //Событие перемещения мыши theCanvas.onmousemove = (e) => { //Получаем новую позицию координат при перемещении, используем lineTo для записи текущих координат, а затем обводку для рисования предыдущей точки Путь текущей точки let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.stroke() }}7. Когда мышь будет отпущена, путь больше не будет рисоваться.
Есть ли способ предотвратить два события, отслеживаемые выше, в событии onmouseup? Существует много методов. Один из них — установка onmousedown и onmousemove в значение null. Для isAllowDrawLine задано логическое значение, чтобы контролировать выполнение функции. Полный исходный код см. ниже.
Исходный кодОн разделен на 3 файла: index.html, main.js и utils.js. Здесь используется синтаксис es6. Для настройки среды разработки я использовал parcle, поэтому ошибок не будет. , при запуске. Если возникает ошибка и браузер невозможно обновить, вы можете изменить синтаксис es6 на es5.
1.index.html
Это было показано выше и больше не повторится.
2.main.js
import { windowToCanvas } from './utils'(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext ('2d') let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { let ele = windowToCanvas(theCanvas , e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** Получаем координаты мыши на холсте* */const windowToCanvas = (canvas, x, y) => { let rect = Canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width /rect.width), y: y - rect.top * (canvas.height/rect.height) }}export { windowToCanvas} Подвести итогЗдесь возникает недоразумение: я использую объект Canvas для привязки события theCanvas.onmouseup. На самом деле Canvas не может связывать события. На самом деле связаны документ и окно. Но поскольку браузер автоматически оценит это за вас и передаст обработку событий, вам вообще не о чем беспокоиться.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.