CANVAS шаг за шагом: Основы
У нашего подопытного тега есть всего два атрибута — height и width, высота и ширина соответственно, по умолчанию размер холста 150х300 пикселей.
Стоит отметить что canvas создает область фиксированного размера содержимым которого управляют контексты.
Элементарный пример:
Если сохранить эти несчастные 13 строк в файл и открыть его браузером, то можно будет увидеть область с чёрным прямоугольником, так вот это и есть тот самый холст, на котором нарисован прямоугольник размеры которого равны размерам canvas’а.
Прямоугольники
Самой элементарной фигурой которую можно рисовать является прямоугольник. Предусмотрено три функции для отрисовки прямоугольников.
strokeRect(x, y, ширина, высота) // Рисует прямоугольник fillRect(x, y, ширина, высота) // Рисует закрашенный прямоугольник clearRect(x, y, ширина, высота) // Очищает область на холсте размер с прямоугольник заданного размера var example = document.getElementById("example"), ctx = example.getContext('2d'); example.width = 640; example.height = 480; ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillRect(20, 20, 256, 256); for (i = 0; i А теперь краткий построчный разбор:
в строках 10 и 11 мы изменили размер холста — чтоб бы задуманное нами изображение полностью отобразилось,
в строках 12 и 13 мы нарисовали два не закрашенных прямоугольника которые будут символизировать своеобразную рамку нашей «шахматной доски»,
в строке 14 отрисовываем закрашенный прямоугольник размеры которого бы позволил вместить в себе 64 квадрата с шириной стороны 32 пикселя,
в строках с 15 по 19 у нас работает два цикла которые очищают на чёрном прямоугольнике квадратные области в таком порядке что бы в итоге полученное изображение было похоже на шахматную доску
Линии и дуги
beginPath() closePath() stroke() fill() beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» занова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Завершающий шаг это вызовом метода stroke или fill. Собственно первый обводит фигуру линиями, а второй заливает фигуру сплошным цветом.
Те кто когда-то на школьных 486х в былые годы рисовал в бейсике домик, забор и деревце по задумке учителя тот сразу поймёт часть ниже. Итак, существуют такие методы как,
moveTo(x, y) // перемещает "курсор" в позицию x, y и делает её текущей lineTo(x, y) // ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей arc(x, y, radius, startAngle, endAngle, anticlockwise) // рисование дуги, где x и y центр окружности, далее начальный и конечный угол, последний параметр указывает направление В строке 14 заливается цветом дуга, в строке 22 обводится контур нашей короны.
Кривые Бернштейна-Безье
Что такое кривые Безье я думаю лучше объяснит Википедия.
Нам доступно две функции, для построения кубической кривой Бизье и квадратичной, соотвестствено:
quadraticCurveTo(Px, Py, x, y) bezierCurveTo(P1x, P1y, P2x, P2y, x, y) x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубическо кривой соответственно две дополнительные точки.
Пример двух кривых:
Добавим цвета
fillStyle = color // определяет цвет заливки strokeStyle = color // цвет линий цвет задается точно так же как и css, на примере все четыре способа задания цвета // все четыре строки задают оранжевый цвет заливки ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)" Аналогично задаётся и цвет для линий.
Возьмём пример с шахматной доской и добавим в него немного цвета:
var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.strokeStyle = '#B70A02'; // меняем цвет рамки ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillStyle = '#AF5200'; // меняем цвет клеток ctx.fillRect(20, 20, 256, 256); for (i = 0; i Задача
Что бы усвоить информацию и закрепить прочитанное на практике я всегда ставлю перед собой не большую цель которая бы одновременно охватывала всё прочитанное и одновременно процесс достижения которой было бы интересен мне самому. В данном случае я попытаюсь отрисовать уровень одной из моих самых любимых в детстве игр. Собственно за не имением времени — добавлять жизнь на него я не буду, а сделаю максимально понятный код охватывающий практически всё то что сегодня здесь описал.
Я воспроизвел один из уровней игры BattleCity известную у нас как Танчики, а вот и ссылка на pastebin на случай если не будет откликаться дропбокс.
На последок комментарий по примеру. В спецификациях картинки которую может выдавать Денди разрешение экрана должно быть 256×240 пикселей.
Поле боя в общеизвестнных Танчиках размером 13х13 больших блоков. Каждый из которых нарисован 4мя повторяющимися спрайтами (коих по общему подсчёту выходит на карте 26х26=676). Итак прикинем как было в оригинале по пикселам и как это правильно масштабировать. Если поделить 240 на 26 то выйдет что целая часть от деления будет 8. Получается что размерность текстуры была 8х8 пиксела т.е. размер поля боя 208х208, а большого блока 16х16. Ширина должна быть 256 пикселов. Сейчас вычислим размер правого столбца с дополнительной информацией и размер полей сверху/снизу. Справа если присмотреться ширина составляет размерность в два блока, итого 2*16=32. У нас уже 32+208=240 слева поле 16, а снизу и сверху соответственно так же по 16 пикселов. Собственно в моём примере размерность большого блока заключена в переменной cellSize, собственно все вычисления делаются иходя из её размеров. Можете по экспериментировать и поменять её значение, настоятельно рекомендую делать его кратным степеням двойки (16, 32, 64, 128. ), если хотите чтоб всё выглядело так как на старом добром денди то устанавливайте её значение равным 16. Хотя и при любых других значениях всё выглядит нормально. Если то как я пишу понравится кому-то кроме меня, то напишу продолжение, а то что в нём будет пока утаю
Базовое использование Canvas
Он выглядит как элемент , но его отличие в том, что он не имеет атрибутов src и alt . Элемент имеет только два атрибута — ширину и высоту. Оба они не обязательны и могут быть выставлены с использованием свойств DOM (en-US) . Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 пикселей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.
Примечание: Если вид вашего изображения кажется вам искажённым, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах , а не с помощью CSS.
Атрибут id не специфичен для элемента , но он может быть применён по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать id , так как это позволяет намного проще идентифицировать наш элемент в сценарии.
Элемент может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.
Запасное содержимое
Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент , вам следует предоставить запасное содержимое для отображения этими браузерами.
Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента . Браузеры, которые не поддерживают проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают проигнорируют запасное содержимое, и просто нормально отобразят canvas.
Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:
canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 canvas> canvas id="clock" width="150" height="150"> img src="images/clock.png" width="150" height="150" alt=""/> canvas>
Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas делает этот тег более доступным для широкого использования.
Требуется тег
Если запасной контент не нужен, простой полностью совместим со всеми браузерами, что поддерживают canvas.
Рендеринг содержимого (контекста)
Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент имеет метод getContext() , используется для получения контекста визуализации и её функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку «2d».
var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');
В первой строке скрипта мы получаем узел нашего холста , далее с помощью document.getContext() метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода getContext() .
Проверка поддержки
var canvas = document.getElementById('tutorial'); if (canvas.getContext) var ctx = canvas.getContext('2d'); // drawing code here > else // canvas-unsupported code here >
Скелет шаблона
Здесь минимальный шаблон, который мы будем использовать как начальную точку для дальнейших примеров.
Примечание: вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.
DOCTYPE html> html> head> title>Canvas tutorialtitle> script type="text/javascript"> function draw() var canvas = document.getElementById('tutorial'); if (canvas.getContext) var ctx = canvas.getContext('2d'); > > script> style type="text/css"> canvas border: 1px solid black; > style> head> body onload="draw();"> canvas id="tutorial" width="150" height="150">canvas> body> html>
Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путём события load (en-US) в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов window.setTimeout() (en-US), window.setInterval() (en-US), или любым другим обработчиком события, когда страница будет загружена.
Вот как шаблон будет выглядеть в действии.
Простой пример
Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.
DOCTYPE html> html> head> script type="application/javascript"> function draw() var canvas = document.getElementById("canvas"); if (canvas.getContext) var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); > > script> head> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>
Found a content problem with this page?
This page was last modified on 8 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.