canvasExample

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. Хотя и при любых других значениях всё выглядит нормально. Если то как я пишу понравится кому-то кроме меня, то напишу продолжение, а то что в нём будет пока утаю

Источник

Что такое html 5 canvas

HTML Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока . Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.

Content categories (en-US)	Flow content (en-US) , phrasing content (en-US) , embedded content (en-US) , palpable content.
Permitted content	Transparent но без interactive content (en-US) descendants except(соглашаться?) для элементы, элементы, элементы как type атрибут is checkbox , radio , или button .
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Permitted parent elements	Any element that accepts phrasing_content (en-US) .
DOM interface	HTMLCanvasElement

Атрибуты

Высота в координатном пространстве в CSS пикселях. По умолчанию 150.

Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.

Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.

Описание

Обязательно тег

Определение размеров холста

Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах , и не используя CSS.

Примеры

canvas id="canvas" width="300" height="300"> Извините, ваш браузер нет поддерживает<canvas> элемент. canvas> 

Если ваш холст не использует transparency, установите moz-opaque атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .

canvas id="mycanvas" moz-opaque>canvas> 

Спецификации

Совместимость браузеров

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 21 июн. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Руководство по Canvas

— это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования . Примеры их создания приводятся в этой статье.

В этом руководстве описываются основы использования элемента для рисования 2D-графики. Приведённые примеры дадут вам понимание того, что вы можете сделать с помощью , а использованные в статье фрагменты кода помогут в создании собственных проектов.

Впервые использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с . Тег часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

Прежде чем начать

Работа с элементом довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width . Для рисования графики мы будем использовать javascript context object , который создаёт графику динамически.

В этом руководстве

Смотрите Также

• Canvas topic page
• Drawing Graphics with Canvas (en-US)
• Canvas examples
• HTML5 Tutorial
• Drawing Text Using a Canvas (en-US)
• Adding Text to Canvas
• Canvas Drawing and Animation Application
• Interactive canvas tutorial
• HTML5CanvasTutorials
• How to draw N grade Bézier curves with the Canvas API
• W3C Standard

Примечание для помощников

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.

Found a content problem with this page?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник