HTML5 Canvas — вставка изображений и текста
На холсте можно в совершенстве нарисовать любую желаемую графику, от набора линий или простых геометрических фигур до портрета со всеми мельчайшими подробностями. Но с повышением уровня сложности графики повышается уровень сложности кода. В высшей степени маловероятно, что можно было бы написать самостоятельно весь код, требуемый для создания высококачественного изображения.
К счастью, у разработчиков есть другие варианты, кроме как писать весь код самостоятельно. Возможности контекста рисования не ограничиваются рисованием простых прямых и кривых линий, также существуют методы для вставки готовых изображений, текста, узоров и даже рамок для показа видео.
Вставка в Canvas изображений
Вам, наверное, приходилось видеть веб-страницы со спутниковыми картами того или иного региона планеты. Эти карты создаются из снимков отдельных участков поверхности земли, которые эти страницы загружают со спутника и объединяют в одно изображение. Это пример того, как можно взять несколько изображений и объединить их в одно требуемым образом.
Холст поддерживает работу с обычными изображениями посредством метода текста рисования drawImage(). Чтобы вставить изображение в холст, методу drawImage() в параметрах передается объект изображения и координаты холста, по которым это изображение следует вставить:
// Определение контекста рисования canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d"); context.drawImage(img, 10, 10);Но чтобы передать объект изображения, его сначала нужно получить. В HTML5 есть три разных способа получения объекта изображения. Первый подход — создать его самостоятельно попиксельно с помощью метода createImageData(). Но этот подход очень трудоемкий и медленный.
Второй подход — использовать уже имеющийся в разметке элемент . Например, если у нас есть следующая разметка:
тогда изображение можно вставить в холст с помощью этого кода:
var img = document.getElementById("photo"); context.drawImage(img, 10, 10);Наконец, можно создать объект изображения и загрузить изображение из отдельного файла. Недостаток этого подхода состоит в том, что изображение нельзя использовать с методом drawImage() до тех пор, пока оно полностью не загрузится. Во избежание проблем нужно подождать, пока не выполнится событие загрузки изображения onLoad, прежде чем пытаться выполнять какие-либо операции с ним.
Чтобы разобраться в этом процессе, рассмотрим пример. Допустим, нам нужно отобразить на холсте изображение face.jpg. Теоретически, это можно сделать такой последовательностью операций:
// Создаем объект изображения var img = new Image(); // Загружаем файл изображения img.src = "face.jpg"; // Прорисовываем изображение. (Этот шаг может не выполниться, // т.к. изображение, может быть, еще не загрузилось.) context.drawImage(img, 10, 10);Здесь проблема состоит в том, что установка атрибута src начинает загрузку изображения, но код продолжает исполняться дальше, не ожидая завершения загрузки. Правильно будет использовать следующий код:
// Создаем объект изображения var img = new Image(); // Привязываем функцию к событию onload // Это указывает браузеру, что делать, когда изображение загружено img.onload = function() < context.drawImage(img, 10, 10); >; // Загружаем файл изображения img.src = "face.jpg";Этот подход может показаться нелогичным, т.к. порядок указания операций в коде не совпадает с порядком их исполнения. В данном примере вызов метода context.drawImage() происходит в последнюю очередь, вскоре после установки свойства img.src.
Изображения имеют широкий диапазон применений. Их можно использовать, чтобы приукрасить штриховые рисунки или как альтернативу рисованию изображений самому. Изображения можно использовать для разных объектов и персонажей, разместив их соответствующим образом на холсте. Изображения можно также применять для заполнения линий, чтобы придать им текстурированный вид.
Искажение рисунков в элементе Canvas
Если обнаружится, что ваше изображение по непонятной причине растянуто, сжато или искажено каким-либо другим образом, наиболее вероятной причиной этому будет установка размера холста посредством правила таблицы стилей. Правильно устанавливать размер холста надо через указание его высоты и ширины в атрибутах height и width элемента в разметке страницы. Может показаться, что эти значения не обязательно задавать в разметке, используя такую форму тега:
а установить их в правиле таблицы стилей следующим образом:
canvas
Но этот подход не будет работать. Проблема состоит в том, что свойства height и width CSS отличаются от одноименных свойств элемента . Если не указать размеры холста в разметке, будет установлен размер холста по умолчанию 300×150 пикселов. Потом таблица стилей будет растягивать или сжимать холст, чтобы подогнать его к указанным в ней размерам, изменяя соответствующим образом размеры всего содержимого холста. В результате размещенные на холсте изображения будут искажены, что, несомненно, не сделает их привлекательными.
Во избежание этой проблемы всегда нужно указывать размер холста в разметке посредством атрибутов height и width элемента . А если нужно изменить размер холста на основе каких-либо других критериев, значения этих атрибутов изменяются в разметке с помощью JavaScript.
Обрезка, разрезка и изменение размеров изображения
Функция drawImage() принимает несколько необязательных параметров, которые позволяют манипулировать изображением на холсте. Например, размер изображения можно изменить, указав параметры width и height следующим образом:
// JS context.drawImage(img, 10, 10, 80, 150);В данном случае метод размещает изображение в рамке размером 80×150 пикселов, левый верхний угол которой находится в точке холста с координатами (10,10). Если первоначальный размер изображения был 160×300 пикселов, то эта операция уменьшает его размеры наполовину в обоих направлениях, в результате чего общий размер конечного изображения будет лишь в четверть размера исходного.
Если нужно вставить в холст только часть изображения, методу drawImage() необходимо передать четыре параметра в начале списка параметра. Эти параметры определяют позицию и размер части изображения, которую нужно вырезать:
context.drawImage(img, source_x, source_y, source_width, source_height, x, y, width, height);Последние четыре параметра в этом коде те же, что и в предыдущем примере — они определяют позицию и размер изображения на холсте. Допустим, что мы хотим вставить в холст только верхнюю половину изображения с исходным размером 225×300 пикселов. Для этого с левого верхнего угла изображения (точка (0,0)) отрезаем часть изображения шириной в 225 и высотой в 150 пикселов, которую потом вставляем в холст в начальной точке с координатами (50,25). Все это делается в одной строчке кода:
context.drawImage(img, 0, 0, 225, 150, 50, 25, 225, 150);
Возможностей метода drawImage() недостаточно, если вставляемое в холст изображение нужно повернуть или скосить на определенный угол. Но эти и другие манипуляции с изображением на холсте можно выполнить с помощью трансформаций.
Видеокадр
В первом параметре метода drawImage() указывается изображение, которое нужно вставить в холст. Как мы только что увидели, таким изображением может быть созданный объект изображения или элемент , расположенный где-то в другом месте разметки.
Но это не все, что можно вставить в холст посредством этого метода. Вместо изображения можно указать элемент (но не тот, на котором выполняется настоящее рисование). Таким же образом можно вставить и элемент , в котором воспроизводится видео:
var video = document.getElementById("videoPlayer"); context.drawImage(video, 0, 0, video.clientWidth, video.clientWidth);При исполнении этого кода выполняется захват одного кадра видео, воспроизводимого в момент выполнения кода, который потом вставляется в холст.
Эта возможность открывает дверь для создания некоторых интересных эффектов. Например, с помощью таймера можно последовательно выполнять захват кадров воспроизводимого видео и вставлять их в холст. Если делать это достаточно быстро, то вставляемая в холст последовательность кадров будет создавать эффект проигрывающегося видео.
Но чтобы это не был просто другой видеопроигрыватель, захваченные кадры можно модифицировать перед тем, как вставлять их в холст. Например, вставляемый кадр можно увеличить или уменьшить или наложить какой-либо эффект в стиле Photoshop, модифицировав его на уровне пикселов. Один из примеров такой манипуляции смотрите на странице «video + canvas = magic». В нем показано, как сделать цветное видео черно-белым, преобразуя каждый цветной пиксел захваченного кадра в оттенок серого.
Вставка в холст текста
Другим типом данных, который нам вряд ли бы хотелось составлять из отдельных прямых и кривых, является текст. К счастью, разработчики HTML5 позаботились и об этом для нас и предоставляют два метода контекста рисования для работы с текстом.
Но прежде чем вставлять в холст какой-либо текст, нужно указать шрифт для него, установив значение свойства контекста font. Это значение указывается посредством строки с таким же синтаксисом, как и для универсального свойства font CSS. Как минимум, нужно указать размер шрифта в пикселах и его название. В случае неуверенности в поддержке определенного шрифта браузерами, можно указать список шрифтов:
// JS context.font = "20px Verdana, sans-serif";Также можно установить жирный шрифт или курсив, указав соответствующие параметры в начале строки:
// JS context.font = "bold 20px Verdana, sans-serif";Самое главное, благодаря CSS3 можно использовать вычурные встроенные шрифты. Для этого нужно лишь сначала зарегистрировать название шрифта в таблице стилей. После установки шрифта текст в холсте вводится с помощью метода fillText(). Например, следующий код вводит в холст строку текста, левый верхний угол которого находится в точке (10,10):
// JS context.textBaseline = "top"; context.font = "bold 20px Arial"; context.fillStyle = "black"; context.fillText("Кто рано встает, тот точно не я.", 10, 10);Текст можно вставлять в любое место на холсте, но только по одной строке за раз. Чтобы вставить несколько строк, нужно делать соответствующее число вызовов метода fillText().
Вместо метода fillText() можно использовать другой метод для ввода текста — strokeText(). Этот метод вводит контуры букв текста; цвет и толщина контуров определяются значениями свойств контекста strokeStyle и lineWidth. Далее показано использование этого метода:
// JS context.font = "bold 40px Verdana,sans-serif"; context.lineWidth = 1; context.strokeStyle = "red"; context.strokeText("Народная мудрость", 20, 50);
Как уже отмечалось, метод strokeText() вводит только очертания букв. Если требуется создать текст одного цвета, а его обводку — другого, можно использовать сначала метод fillText(), а после него метод strokeText().
Операция вывода текста на холст выполняется намного медленнее, чем рисование линий и даже изображений. Скорость не имеет важности при создании статического изображения (например, диаграммы), но может быть фактором при создании интерактивного приложения или анимации. Оптимизировать ввод текста можно, сначала сохранив требуемый текст в файле изображения, а потом отображая его на холсте посредством метода drawImage().
Использование изображений
Импортирование изображений в canvas в основном состоит из 2 этапов:
- Дав ссылку на HTMLImageElement объект или для другого canvas элемента как источник. Также можно использовать изображение дав ссылку на URL.
- Для рисования изображения на canvas используется функция drawImage() .
Давайте посмотрим как это сделать.
Использование изображений для рисования
Canvas API может использовать все перечисленные далее типы данных как источник изображения:
Эти изображения созданы, используя конструктор Image() , также как все элементы.
Есть несколько способов, чтобы получить изображения для использования на холсте.
Использование изображений из той же страницы
Мы можем получить ссылку на изображение, на той же странице, на canvas с используя один из способов:
- document.images коллекция
- The document.getElementsByTagName() метод
- Если вы знаете id конкретного изображения, который вы хотите использовать, вы можете использовать document.getElementById () , чтобы получить это конкретное изображение
Использование изображений из других доменов
Использование crossorigin атрибута элемент (отображается HTMLImageElement.crossOrigin (en-US) свойства), вы можете запросить разрешение на загрузку другого домена для использования в drawImage() . Если хостинг домен разрешает доступ к междоменному изображению, то изображение может быть использовано в вашем canvas без without tainting it;иначе он может испортить ваш canvas.
Использование других canvas элементов
Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо document.getElementsByTagName() либо document.getElementById() метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.
Одним из удобных способов было бы использование второго элемента canvas в качестве миниатюры другого большего изображения canvas.
Создание изображений с нуля
Другой способ это создать новые HTMLImageElement объекты в нашем скрипте. Чтобы это сделать, вы можете использовать удобный Image() конструктор:
var img = new Image(); // Создаёт новый элемент изображения img.src = "myImage.png"; // Устанавливает путь
Когда этот скрипт выполнится, изображение начнёт загружаться.
Если вы попытаетесь вызвать функцию drawImage() перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:
var img = new Image(); // Создаёт новое изображение img.addEventListener( "load", function () // здесь выполняет drawImage функцию >, false, ); img.src = "myImage.png"; // Устанавливает источник файла
Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса, вы должны об этом помнить.
Вложение изображения с помощью данных: URL
Другой возможный способ включить изображение это через data: url (en-US) . Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.
var img = new Image(); // Создаёт новый элемент img img.src = "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw= token punctuation">;
Одним из преимуществ data URLs это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши CSS, JavaScript, HTML, и изображения, что делает его более портативным в других местах.
Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодирование url может стать очень долгим процессом.
Использование кадров из видео
function getMyVideo() var canvas = document.getElementById("canvas"); if (canvas.getContext) var ctx = canvas.getContext("2d"); return document.getElementById("myvideo"); > >
Эта функция вернёт HTMLVideoElement объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как CanvasImageSource .
Рисование изображений
Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод drawImage() для включения его в canvas. Как мы увидим далее, метод drawImage() перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:
Рисует изображение, указанное в CanvasImageSource в координатах ( x , y ).
Примечание: SVG изображения должны указывать ширину и высоту корневого элемента.
Пример: Простой линейный график
В следующем примере, мы будем использовать внешнее изображение в качестве фона для небольшого линейного графика. Использование фонов может сделать ваш скрипт значительно меньше, потому что мы можем избежать необходимости писать код для создания фона. В этом примере мы используем только один образ, поэтому я использую обработчик событий изображения объекта загрузки для выполнения операторов рисования. drawImage() метод определяющий место фона с координатами (0, 0), которые привязаны к верхнему левому углу canvas.
html> body onload="draw();"> canvas id="canvas" width="180" height="150">canvas> body> html>
function draw() var ctx = document.getElementById("canvas").getContext("2d"); var img = new Image(); img.onload = function () ctx.drawImage(img, 0, 0); ctx.beginPath(); ctx.moveTo(30, 96); ctx.lineTo(70, 66); ctx.lineTo(103, 76); ctx.lineTo(170, 15); ctx.stroke(); >; img.src = "backdrop.png"; >
Получившийся график выглядит так:
Изменение размеров
Второй вариант метода drawImage() добавляет два новых параметра и позволяет разместить изображение в canvas с изменёнными размерами.
Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в canvas.
Пример: Тайлинг изображения
В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая изменённые изображения на разных позициях. В коде внизу, первый цикл for проходит по рядам. Второй цикл for проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было 50×38 пикселей.
Примечание: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым.
html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>
function draw() var ctx = document.getElementById("canvas").getContext("2d"); var img = new Image(); img.onload = function () for (var i = 0; i 4; i++) for (var j = 0; j 3; j++) ctx.drawImage(img, j * 50, i * 38, 50, 38); > > >; img.src = "rhino.jpg"; >
Получившийся рисунок canvas выглядит так:
Нарезка
У третьего и последнего варианта метода drawImage() в дополнении к источнику изображения есть ещё восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.
В данном изображении, эта функция берёт фрагмент из изображения, в виде прямоугольника, левый верхний угол которого — ( sx , sy ), ширина и высота — sWidth и sHeight и рисует в canvas, располагая его в точке ( dx , dy ) и изменяя его размер на указанные величины в dWidth и dHeight .
Чтобы понять что делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения. Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке canvas.
Нарезка может быть полезным инструментом, когда вы захотите сделать композицию. Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.
Пример: Обрамление изображения
В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим её в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещён в любой фон, без беспокойства о матовом цвете.
html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> div style="display:none;"> img id="source" src="rhino.jpg" width="300" height="227" /> img id="frame" src="canvas_picture_frame.png" width="132" height="150" /> div> body> html>
function draw() var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // Рисуем фрагмент ctx.drawImage( document.getElementById("source"), 33, 71, 104, 124, 21, 20, 87, 104, ); // Рисуем рамку ctx.drawImage(document.getElementById("frame"), 0, 0); >
В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых HTMLImageElement объектов, мы включили их как тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью CSS-свойства display , установленного в «none» для этих изображений.
Скрипт, сам по себе, очень простой. Каждому присвоен атрибут ID, который делает удобным их выбор с использованием document.getElementById() . Потом мы просто используем функцию drawImage() , чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции drawImage() .
Пример галереи искусства
В последнем примере этой главы, мы построим небольшую галерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится, элемент вставится в каждое изображение, а вокруг будет нарисована рамка.
В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них. Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.
Код ниже должен говорить сам за себя. Мы проходим циклом через document.images контейнер и соответственно добавляем новые элементы canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется Node.insertBefore метод. insertBefore() это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел (элемент canvas).
html> body onload="draw();"> table> tr> td>img src="gallery_1.jpg" />td> td>img src="gallery_2.jpg" />td> td>img src="gallery_3.jpg" />td> td>img src="gallery_4.jpg" />td> tr> tr> td>img src="gallery_5.jpg" />td> td>img src="gallery_6.jpg" />td> td>img src="gallery_7.jpg" />td> td>img src="gallery_8.jpg" />td> tr> table> img id="frame" src="canvas_picture_frame.png" width="132" height="150" /> body> html>
И сюда какую-нибудь CSS для украшения:
body background: 0 -100px repeat-x url(bg_gallery.png) #4f191a; margin: 10px; > img display: none; > table margin: 0 auto; > td padding: 15px; >
Связывая все вместе JavaScript рисует наши изображения в рамках:
function draw() // Цикл по всем изображениям for (var i = 0; i document.images.length; i++) // Не добавляет canvas для изображения рамки if (document.images[i].getAttribute("id") != "frame") // Создаёт элемент canvas var canvas = document.createElement("canvas"); canvas.setAttribute("width", 132); canvas.setAttribute("height", 150); // Вставляет перед изображением document.images[i].parentNode.insertBefore(canvas, document.images[i]); var ctx = canvas.getContext("2d"); // Рисует изображение в canvas ctx.drawImage(document.images[i], 15, 20); // Добавляет рамку ctx.drawImage(document.getElementById("frame"), 0, 0); > > >
Контроль изменений размеров изображения
Как было отмечено ранее, изменение размеров изображений может привести к размытости или к шуму в процессе преобразования. Вы можете использовать контекст рисования imageSmoothingEnabled (en-US) свойства, чтобы контролировать использование сглаживающего алгоритма, когда изменяющиеся изображения в вашем контексте. Обычно это свойство установлено в true , означая, что изображения будут сглажены во время изменения размеров. Вы можете отключить это свойство так:
.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;
- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как вставить изображение в canvas?
Подскажите пожалуйста, возможно ли вставить вместо точек произвольное изображение, указав до него путь. И если возможно подскажите куда копать.
- Вопрос задан более трёх лет назад
- 7717 просмотров
Комментировать
Решения вопроса 1
Павел Антонов @freislot Автор вопроса
Frontend-разработчик
var img = new Image(); // Создаём новый объект Image img.src = 'imgcss/wide.png'; // Устанавливаем путь к источнику context.drawImage(img, this.x, this.y, 50, 26); //рисуем картинку в канвасОтвет написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
HTML5 CANVAS шаг за шагом: Изображения
Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция:
var img = new Image(); // Новый объект img.onload = function() < // Событие которое будет исполнено в момент когда изображение будет загружено /* Какие-либо действия */ >img.src = 'myImage.png'; // Путь к изображению Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример:
imgExample Ссылка на фидл с примерами для этой стать.
2. Тянем-потянем
Но если бы всё ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущем посте. Итак теперь мы попытаемся масштабировать изображение и для этого существует ещё один способ вызова функции drawImage:
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения Возьмём предыдущий пример и внесём в drawImage некоторые изменения:
ctx.drawImage(pic, 0, 0, 300, 150); Ссылка на фидл с примерами для этой стать.
3. Рисуем фрагмент изображения
Третий вызов drawImage с восемью параметрами, выглядит приблизительно так:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // Первый параметр указывает на изображение // sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике // dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте Возьмём всё тот же пример и подкорректируем функцию drawImage в третий раз:
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110); Ссылка на фидл с примерами для этой стать.
4. Задача
Теперь осталось закрепить всё пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это изображение я нарисовал собственноручно в программе Pinta под Ubuntu.
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. Траву и песок делалось путём заливки облости соответствующим цветом и добавки шума. Всё конечно представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[… значения x и y указывают какой элемент из картинки брать. Т.е. если исходный рисунок разбить на квадрат 32×32 то станет понятней.
И форэкзампл:
imgExample