Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

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

<canvas> был впервые представлен Apple для Mac OS X Dashboard и позже был реализован для Safari и Google Chrome.Браузеры основанные на  Gecko 1.8, такие как Firefox 1.5, так же поддерживают этот элемент. Тег <canvas> часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

Это руководство описывает как использовать элемент <canvas> для рисования 2х мерной графики(2D),  с  самых основ. Приведенные примеры должны подсказать несколько идей, что вы можете реализовать с помощью Canvas и и приведенные примеры кода помогут начать Вам создавать собственные проекты.

Прежде чем мы начнем

Использование элемента <canvas> не сложно в понимании, но потребует от вас базовых знаний HTML и JavaScript. Должны предупредить вас, что элемент <canvas> не поддерживается некоторыми старыми браузерами, но поддерживается большинством  версий всех основных браузеров. Стандартный размер canvas  300px * 150px (ширина * высота). Но размеры могут быть указаны с использованием аттрибутов высоты и ширины в  CSS. Для рисования графики  canvas мы будем использовать javascript context object,  который создает графику "на лету".

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

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

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

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

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: vladimir_gamalian, fscholz, Neir, ut2010, hmelenok, RokkerRuslan, kscarfone
 Обновлялась последний раз: vladimir_gamalian,