Автор оригинала: FreeCodeCamp Community Member.
Nash Vail.
Хорошо, так вот вопрос: «Почему нам нужна статья для этого, Нэш?»
Ну, возьмите сиденье.
Нет, подождите! Во-первых, посмотрите на это.
Точно. Что это было?
Дримаж Метод, используемый для отображения или «нарисовать» изображение на холст Отказ Вы можете или, возможно, еще не знаете, что это не так просто, как только пропустить URI изображения к нему. Дримаж Принимает максимум 9 параметров. Они идут что-то вроде этого, готовы? Задержи дыхание…
(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Выдохнуть.
Я нашел Документация для Дримаж немного запутанно и хардкор. Просто документация, да. Концепция и как работает API, отлично подходит для всех потребностей, которые предполагается служить.
Мы перейдем на параметры, упомянутые выше один за другим, так как это будет иметь вам полный смысл. Если в любой момент в статье вы найдете себя «Я просто хотел рисовать изображение на моем холсте, дорогой Нэш. Зачем понять мой разум через звонок? «Это будет понятное разочарование.
Путь Дримаж Работы кажутся сложными в некоторой степени, но эта сложность делает Дримаж Безмерно мощный и полезный – как мы увидим через примеры в конце. Более того, сложность просто на поверхности: Как только вы поймете всю картину, это езда на велосипеде на проселочной дороге где-то в Европе.
К концу этой статьи вы сможете визуализировать, как Дримаж нарисует любое данное изображение на холст Просто, глядя на значения 9 параметров. Звучит как сверхдержава, вы можете иметь? Тогда, давайте погрузимся прямо в!
Загрузка изображения в холсте
Давайте начнем простым с изображением и HTML5 холст .
Вот что выглядит наш каталог
Внутри нашего index.html Файл, который мы создали новый элемент холста, как так.
Наша цель – взять cat.jpg Изображение и положить его на холст ( # My-Canvas ). И, как я уже сказал, это не так просто Бетти! Иначе я не буду писать эту статью, вы чувствуете меня? Хороший.
Для начала, давайте нацеленным на холст элемент с использованием JavaScript и получите его контекст.
const myCanvas = document.getElementById('my-canvas'); const myContext = myCanvas.getContext('2d');Нам нужно mycontext взаимодействовать с холст элемент. Это как холст Это пустой лист бумаги, контекст холста – ручка. Интуитивно, вы скажете свою ручку нарисовать что-то на чистом листе бумаги, а не просто кричать на бумагу, чтобы нарисовать что-то на себе?
Есть несколько вещей, которые вы можете сделать с контекст Отказ Вы можете нарисовать прямоугольник или эллипс или линию или … изображение Отказ Кроме того, обратите внимание, что контекст mycontext неявно связан с Mycanvas Отказ Вы можете иметь несколько холст ES и позвонить getcontext () на каждом из них, чтобы получить новый контекст/ручку для каждого. В нашем случае мы имеем дело с одним холстом ( MyCanvas ) и только один контекст ( MyContext ).
Хорошо, с таким образом, мы можем начать получать наши ноги мокрыми с Дримаж Отказ
Для повышения квалификации вот 9 параметров, которые Дримаж принимает.
(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Начнем с первого параметра изображение Отказ Давайте сначала напишу что-то, что не работает.
context.drawImage('./cat.jpg', 0, 0);Смотрите два нуля в конце? Хороший. Это не часть статьи, где вы должны понимать, что они там. Игнорируйте их сейчас, просто держите в глубине головы, что Nash писал 2 нуля и не объяснил их. Я не буду против.
Теперь обратите внимание на ... ('./cat.jpg', .. в линейке кода выше. Кажется, совершенно правильный URI не так ли? И это … Буууууут, если вы угодитесь index.html В браузере вы увидите длительное длительное сообщение об ошибке, идентично тому, что показано ниже.
ERROR: The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)
*глоток*
Ошибка говорит нам, что ему нужно изображение элемент И не просто URI на изображение. Чтобы обойти это, это то, что мы можем сделать.
const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const img = new Image(); img.src = './cat.jpg'; img.onload = () => { context.drawImage(img, 0, 0); };Это то, что вы не ожидали, что ты? Холст нуждается в предварительно загруженном изображении, чтобы нарисовать/отображать его сам по себе. Кстати, не нужно показывать какое-либо презрение к Холве. У этого есть причина, это так же, как и все остальные. В конце концов мы посмотрим, какие эти причины и, возможно, тогда вы сможете сочувствовать.
Чтобы пересмотреть:
Дримаж Запрашивает 9 параметров, прежде всего изображение . Мы смотрели и поняли, что холст Требуется предварительное загруженное изображение, а не просто URI на изображение. Почему это нужно это? Это станет ясно, как вы читаете.
Теперь пришло время для оставшихся 8 параметров. Поп-твою ошейники! Я собираюсь узнать вам немного редактирования графики!
Как обрезать картину
Каждая программа редактирования графики, даже самая основная, поставляется с функцией обрезки. Это довольно просто: откройте изображение> Выберите область, которую вы хотите видимое> HiT Crop. И так же, как это нагонный пивной живот из этого неприятного пахнущего старика. Пусть!
Технология! Сохранение людей Instagrams с момента существования Instagram.
Давайте сделаем шаг назад, и остановите Riiight, здесь.
Давайте отметим некоторые очки на это.
“Подожди секунду! SX , показывать , Shidth и оздоровительный ? Я видел их раньше! “
Да, около минуты назад! Что приводит нас к самой мелкой части статьи.
Отображение изображения на холсте, шага 1: Выбор
Первая задача Дримаж Выполняет (за кулисами) это выбирает часть изображения на основе четырех S Параметры ( Sx, Sy, Shidth, Hyight ). Вы можете сказать, что S во всех параметрах S подпитывается для «выбора».
Вот как это происходит. SX и показывать Отметьте точку на изображении, откуда начнется выбор, или другими словами, координаты верхнего левого угла прямоугольника выбора. Shidth и оздоровительный Затем ширина и высота выбора прямоугольника соответственно. Вы можете прокрутить прямо до последнего изображения, чтобы получить более четкую картину того, что я пытаюсь объяснить.
«Но почему выбор Nash? Разве это просто отображать все изображение? «Мы приближаемся ко всем твоим ответам, терпение.
Просто знаю, что первый шаг Дримаж Выполняет после получения правильного изображения, это выбирает часть/область изображения на основе параметров S (SX, SY, ширина, высота) Вы предоставляете.
Помните, что вам не всегда нужно выбрать небольшую часть изображения, вы можете выбрать все изображение, если хотите. В этом случае SX и показывать будет иметь значения 0 и 0 соответственно и шведский стол , Гейт будет такой же, как ширина и высота изображения.
Кроме того, негативные значения приветствуются для усадьба и показывать . Значения усадьба и показывать относительно происхождения изображения сверху слева.
Однажды Дримаж Выбрал область изображения, которую вы просили его – и мы скоро увидимся, почему выбирать область изображения помогает – следующим шагом – нарисовать выбранную часть изображения на холсте.
«Первоначально» S и D В официальной документации стенд для «источника» и «назначения». Но, только между нами, давайте назовем это «выберите» и «Draw». Это делает гораздо больше смысла таким образом, не так ли?
Опять таки. S Выборы сделаны, следующий шаг – D сырой.
Отображение изображения на холсте, шага 2: Рисунок
Чтобы нарисовать выбранную часть изображения, мы снова нужны четыре параметра.
- x Координата того, где начать рисование на холсте. (
DX) - y Координата того, где начать рисование на холсте. (
dy) - Насколько широко рисовать изображение. (
Dwidth) - Как высоко/высокий, чтобы нарисовать изображение. (
Dheight)
Значения дх и DY будет относительно происхождения холста.
Есть очень важные, но тонкие детали, чтобы заметить здесь. Dwidth и Dheight никоим образом не связаны с Shidth и Высота Отказ Они являются независимыми ценностями. Зачем тебе это знать? Что ж, потому что если вы не выбираете значения ширины и высота «Track» тщательно, вы окажетесь с растяженным или раздавленным изображением, как это.
Так что, если это то, что вы не ищете (которые я надеюсь, что вы не), убедитесь, что поддержите соотношение сторон. Или так сказать Shidth делится на Гейт должен быть равен Dwidth делится на Dheight Отказ Это был небольшой маленький отказ от ответственности, вы правитель вашего собственного мира и свободно выбираете все необходимые ценности.
Таким образом, весь процесс отображения/рисования изображения на холсте может быть обобщено всего в двух этапах: выбор и рисунок.
Потрясающие! Не так сложно ведь это?
Теперь в этот момент мы закончили со всей теорией. В остальной части статьи, которая следует, мы выпейте тесто на знания, распространились вокруг вашей головы веселым и практичным примером, и вы будете хороши, чтобы пойти. Но, прежде чем мы сделаем это, давайте поговорим о одной последней важной вещи, касающейся Дримаж .
Значения по умолчанию
Помните свою лекцию на «Эй, держите соотношение сторон и будьте осторожны, не принимайте шоколад от незнакомцев …»? Ну, как оказывается, вы можете опустить определенные ценности и не беспокоиться о соотношении аспекта вообще. Что касается взять шоколад от незнакомцев, снова идет – ты правитель вашего собственного мира.
Вот один из способов использования метода.
drawImage(image, dx, dy)
Это все! В этом случае вы говорите Дримаж Только место на холсте, где начать рисунок. Остальные, усадьба , показывать , Shidth С Высота , Ширина и Dheight позаботились о автоматическом режиме. Способ выбирает все изображение (SX, ширина, «высота) и начинает рисовать на холсте на (DX, DY) с Dwidth и Высота так же, как Ширина (ширина изображения) , Гейт (Высота изображения).
Помните два нуля, которые я не объяснил? Вот где пришли два нуля.
Еще один способ использовать метод,
drawImage(image, dx, dy, dWidth, dHeight)
В этой форме SX, SY, SHIDTH и HASHIST Забота, а метод автоматически выбирает все изображение и оставляет его до вас, чтобы выбрать, где и насколько велико образуется изображение.
Довольно круто! не так ли?
Если у меня может быть ваше внимание еще две минуты, я хотел бы сказать вам, почему S выборы а также D Сырье – две отдельные операции. И как это полезно.
У меня есть ваше внимание? Большой!
Так вот.
Слышал о спрайтах раньше? Видите ли, SPRITE – это концепция компьютерной графики, где график может быть перемещен на экране и в противном случае манипулируется как единое целое.
…?
Я скопировал это определение из Google, чтобы звучать в Suawe.
Хорошо хорошо. Помните Марио?
Хороший.
Давайте сделаем что-нибудь веселое.
Анимация Марио с DrawImage
Видите ли, когда Марио движется вперед/назад или в любом другом направлении, кажется, что он ходит. Его позиция меняется, но и есть сопроводительная анимация его ног и рук движется.
Как они это делают? Показывают ли они разные изображения Mario подряд, как лягубку, и это, как будто он движется?
Ну, 50% да. Представьте, насколько ресурсоемкое хранение и загрузка огромного набора изображений, описывающих каждый кадр анимации в нашей программе (или игре). Вместо этого есть одно изображение, и все позиции выложены в сетка . Как показано ниже.
Для выполнения анимации вместо загрузки нового изображения каждая миллисекунда, часть того же изображения отображается через просмотр на разных положениях. Умный не так ли?
Итак, да, это сортировка, как Flipbook, на самом деле умного Flipbook.
Теперь, если вы могли бы просто растянуть немного и попять на своих костях, я хотел бы, чтобы мы воссоздают анимацию ходьбы Марио. Мы будем использовать спрайт, показанный выше и все, что мы узнали о Дримаж так далеко.
Готовый? Вот так!
Давайте возьмем еще один взгляд на наш спрайт и попробуйте понять размеры сетки, на которых оно было выложено.
Все, что мы сделали здесь, воображают сетку над спрайтом. Обратите внимание, что вся сетка состоит из клеток равных размеров (32 х 39) . Но это все еще просто одно изображение, помните это.
Большой! Теперь давайте приступим к записи некоторых кода. Мы начнем обычный путь, сначала создавая холст Элемент, схватив его и его контекст в JavaScript, а затем загрузка нашего спрашивания Mario.
// index.js const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = './mario.png'; img.onload = () => { ctx.drawImage(img, 0, 0); }; // style.css canvas { /*Add a border around canvas for legibility*/ border: 1px solid grey; }Приведенный выше код приведет к следующему.
WOAH-KAY! У нас есть отображение изображения! Что на самом деле происходит?
Здесь мы используем форму Дримаж – DawsImage (изображение, SX, SY) -Где все изображение с Избран и D Рассматривать на холсте, как это.
То, что мы хотим сделать, прежде всего, выбирают только одну клетку сетки и нарисуйте только эту одну клетку. Давайте начнем сначала изготовление твиков в наш код, который выбирает первую ячейку в третьей строке, тем, на которой Mario стоит перед восьми восток. Мы поступим, как оживить, как только мы сделаем это. Звучит отлично? Прекрасный!
Давайте внесем необходимые изменения в наш код.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Mario variables const MARIO_WIDTH = 32; const MARIO_HEIGHT = 39;
const mario = new Image(); mario.src = './mario.png'; mario.onload = () => { ctx.drawImage( // Image mario, // ---- Selection ---- 0, // sx MARIO_HEIGHT * 2, // sy MARIO_WIDTH, // sWidth MARIO_HEIGHT, // sHeight // ---- Drawing ---- 0, // dx 0, // dy MARIO_WIDTH, // dWidth MARIO_HEIGHT // dHeight ); };Во-первых, обратите внимание на две переменные Mario_width и Mario_Height Отказ Это размеры ячейки сетки, это все, что они есть. Мы определили их, чтобы нам было легче пройти сетку, используя только несколько таких констант. Имеет смысл?
Хороший.
Далее, в //Выбор Блок. Мы определили область изображения, которое мы хотим выбрать, в //Рисование Раздел Мы определили ширину и высоту и положение откуда начать рисование на холсте … AAAN, как правильно, нам удалось нарисовать только одну клетку всей воображаемой сетки.
Довольно просто, просто подбор и рисунок. Теперь на данный момент я хотел бы отвлечься в более старую тему о соотношении сторон. ” Нэш! опять таки? тьфу “Я знаю, я знаю. Но это круто! Смотреть!
Если я изменю значения Dwidth или Dheight Или оба из них, посмотрите, как изображение тянется и сквош.
... ctx.drawImage( // Image mario, // ---- Selection ---- 0, // sx MARIO_HEIGHT * 2, // sy MARIO_WIDTH, // sWidth MARIO_HEIGHT, // sHeight // ---- Drawing ---- 0, // dx 0, // dy MARIO_WIDTH * 2, // dWidth MARIO_HEIGHT * 1.5 // dHeight ); ...
Хах! Видеть! Вот почему я советую вам сохранить соотношение сторон и что значения выбора и рисунка не имеют реального взаимосвязанности.
Хорошо, вернемся к тому, что мы делали.
Так что теперь у нас есть Марио в холсте, маленьких и мало. Нам нужно анимировать его, или, другими словами, показать различные рамки в том же месте подряд и заставить иллюзию движения происходит. Я был слишком конкретным? Черт возьми!
Мы можем сделать это, выбрав клетки сетки, которые мы хотим нарисовать последовательность. Нам просто нужно изменить значение SX Мнаковым Mario_width Отказ
Теперь это потребует использования ProwelsimationFrame И я объяснял, что в полоске в это Статья и это статья.
Как маленькая вызов, почему бы вам не идти дальше и попытаться выполнить это самостоятельно? В любом случае, вы можете проверить этот кодепен, где у меня есть марио, так как это работает. Ручка достаточно комментариев, чтобы помочь вам понять крошечный кусочек математики средней школы, который используется, чтобы анимация произошла.
Милая маленькая вещь!
И с этим мы закончили с очень всесторонним объяснением Дримаж Отказ Надеюсь тебе понравилось.
Если вы сделали это далеко, как насчет того, как вы застрелите мне некоторые отзывы или #goodvibes на Twitter ?
Я рассказал вам о моем новом Веб-сайт ? И я сказал вам, что у этого есть Рассылка тоже? Я бы понравился, если вы подписались, так что я могу уведомить вас каждый раз, когда публикую что-то новое или поставьте что-то новое на продажу в мой магазин . Я продолжу публиковать статьи на среднем, но между двумя недельными разрывами между тем, когда он сначала поднимается на моем сайте, и когда он появится здесь.
Большое спасибо за чтение и большое спасибо за вашу поддержку. Хорошо!:)
Оригинал: “https://www.freecodecamp.org/news/how-displaying-an-image-on-html5-canvas-works-13e3f6a6c4bd/”