Html canvas примеры: Canvas HTML5 — Веб учебники

09.01.1982 alexxlab

Содержание

Введение в Html5-Canvas — Русские Блоги

Недавно я увидел хорошую статью о Canvas на японском веб-сайте, попробовал перевести и, кстати, учился.

Смотрите исходный текст:http://www.html5.jp/canvas/what.html

В этой статье рассказывается, что такое Canvas и что можно делать с помощью Canvas.

1. Что такое холст?

Так называемый Canvas — это метод, разработанный для рисования изображений в браузере.

Пока что, если вы хотите отображать изображения в Html, вам нужно использовать GIF, JPEG и другие изображения. Кроме того, для достижения цели, позволяющей изображениям изменяться в соответствии с условиями и имитации анимации, требуются такие методы, как Flash и Java-апплет.

А через Canvas вы можете напрямую использовать JavaScript для рисования изображений вместо плагинов, таких как Flash и Java-апплет.

Фактически, я попытался нарисовать круговую диаграмму через Canvas. На картинке выше показан снимок экрана с эффектом отображения в Firefox 2.0. То, что рисуется через Canvas, — это цветная часть. Inernet Exploer 6 или выше, если это FireFox 1.5 или выше, Opera 9 или выше, Safari 1.3 или выше, фактический эффект, создаваемый Canvas, можно найти по ссылке ниже

[Пример использования Canvas для рисования круговой диаграммы]

2. Процесс роста Canvas

Первоначально Canvas был разработан Apple, в то время Mac OS и Dashboard использовали этот технический метод. Позже, в соответствии с правилами организации WHATWG, учрежденной такими поставщиками браузеров, как Apple, Mozilla Foundation и Opera Software, было принято название Web Applications. Теперь W3C начинает называть веб-приложения Html5 стандартом для следующего поколения Html.

Хотя Html5 все еще находится в стадии разработки и нет поддерживаемого браузера, для Canvas поддерживаются Safari 1.3 и выше, Opera 9 и выше, а также Firefox 1.5 и выше.

3. Ситуация с Internet Explorer

Возможно, из-за того, что Microsoft не упомянула WHATWG, IE, имеющий наибольшую долю рынка, не поддерживает Canvas. Поэтому фактическое использование Canvas затруднено. Однако, используя общедоступнуюExplorerCanvas Библиотека Javascript, ситуация изменилась.

ExplorerCanvas — это библиотека Javascript, имитирующая Canvas в IE. Вам нужно только импортировать js-файл ExplorerCanvas через тег Script в Html, чтобы использовать его. Таким образом, связанный с Canvas javascript может быть запущен в IE, как и Safari, Firefox и Opera. Хотя есть некоторые части, которые невозможно полностью смоделировать, если это не какая-то конкретная обработка, нет необходимости писать разные коды для IE и других браузеров в коде javascript.

ExplorerCanvas может работать в IE6 и более поздних версиях. Если вы используете ExplorerCanvas, вы можете рисовать изображения через Canvas и отображать их для посетителей Интернета.

4. Экземпляр Canvas

Вот несколько примеров использования Canvas. Некоторые из представленных здесь примеров содержат очень сложную логику обработки. Хотя некоторые примеры кажутся лучше реализованными с помощью Flash, в качестве справки мы видим, что этот эффект может быть достигнут за счет комбинации Canvas и Javascript. Во-первых, давайте взглянем на пример Canvas центра разработки Mozilla. Конечно, при просмотре вам необходимо использовать Firefox 1.5 или выше.

Пример MDC-Canvas

Я только начал смотреть на этот набор примеров [A Basic RayCaster] В то время я был бы удивлен, что этого можно достичь с помощью Canvas. Виртуальное пространство можно перемещать с помощью клавиатуры. Клавиша A поворачивается влево, клавиша D поворачивается вправо, клавиша W перемещается вперед, а клавиша S — назад.

Pizzles using CanvasЭто игра в угадывание, сделанная с помощью Canvas. Разделите фото на несколько частей, нажав на фото, опубликованное на странице. Затем с помощью мыши перемещайте фрагменты один за другим, чтобы восстановить исходную фотографию. Может использоваться как справочник для головоломок с использованием Canvas.

Canvascape — «3D Walker»

Последний — это 3D Walker. Это [A Basic RayCaster] Обновленная версия. Используйте клавиши со стрелками для перемещения и пробел, чтобы прыгать.

5. Что Canvas может и чего не может делать

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

Кроме того, хотя Canvas имеет функцию рисования текста в соответствии с правилами Html5, пока нет браузера, поддерживающего эту функцию (FireFox имеет собственный метод рисования текста). Если вы хотите нарисовать текст, вы можете использовать Dom вместо Canvas, сгенерировать элемент DIV, содержащий текст, установить его координаты, а затем поместить его поверх графики, нарисованной Canvas.

Как упоминалось выше, просто используя Canvas, невозможно удовлетворить все потребности. Если это сложное графическое изображение или симуляция анимации, большинство из них выберут Flash, но Canvas не заменяет Flash. Он должен быть основан на понимании их соответствующих характеристик в зависимости от ситуации.

В следующей статье я наконец могу представитьКак использовать Canvas。

Пример с использованием SVG

D3 наиболее полезен, когда используется для создания и манипулирования визуальными образами на основе SVG. Рисование с использованием div‘ов и других HTML-элементов возможно, но немного неуклюже, и обычно появляются несоответствия отображения в различных браузерах. Использование SVG более надежно, визуально последовательно и быстрее.

Редакторы векторной графики, такие как Illustrator, могут быть использованы для создания SVG-файлов, но нам необходимо научиться создавать их с помощью кода.

Элемент SVG

Scalable Vector Graphics(масштабируемая векторная графика) — формат изображений на основе текста. Каждое SVG-изображение определено с использованием разметки кода, похожей на HTML. SVG-код может быть включен напрямую в HTML-документ. Каждый веб-браузер поддерживает SVG, исключением является только Internet Explorer версии 8 и старше. SVG основан на XML, поэтому вы можете заметить, что элементы, не имеющие закрывающего тега, должны быть самозакрывающимися. Например:

<element></element>   <!-- Uses closing tag -->
<element/>            <!-- Self-closing tag -->

Перед тем как вы сможете что-нибудь рисовать, вам надо создать SVG-элемент. Думайте об SVG-элементе, как о холсте, на котором отрисовываются все ваши визуальные образы(В такой трактовке, SVG концептуально схож с элементом HTML — canvas). Как минимум, хорошо задать ширину и высоту с помощью атрибутов

width и height, соответственно. Если вы их не зададите, SVG растянется на всю площадь блока.

<svg>
</svg>

Здесь SVG-элемент, созданный с использованием кода выше:

Не видите его? Нажмите правой кнопкой по пустому месту выше и выберите «Просмотр кода элемента». Ваш веб-инспектор должен показать что-то похожее:

Заметьте, что тут есть SVG-элемент, который занимает 500 пикселей по горизонтали и 50 пикселей по вертикали.

Также заметьте, что браузеры считают пиксели единицей измерения по умолчанию. Мы указали размеры как 500 и 50, а не 500px и 50px. Мы можем указать px явно, или любую другую единицу измерения, например:

em, pt, in, cm, и mm.

Простые фигуры

Существует некоторый набор фигур, которые вы можете поместить внутрь элемента SVG. Этот набор включает: rect, circle, ellipse, line, text и path.

Если вы знакомы с программирование компьютерной графики, вы вспомните, что обычно координатная система на основе пикселей начинается с левого верхнего угла и имеет координаты точки (0,0). Увеличение х происходить слева направо, увеличение у-сверху вниз.

0,0100,20200,40

rect рисует квадрат. Квадрат задается четырьмя значениями: x, y — указывают точку верхнего левого угла; width, height — указывают ширину и высоту квадрата. Этот квадрат занимает все пространство нашего SVG:

<rect x="0" y="0"/>

circle рисует круг. Круг задается тремя величинами: cx, cy указывают точку, расположенную в центре описываемой окружности, r задает радиус круга. Этот круг расположен в центре нашего SVG, потому что атрибут cx(«center-x») равен 250. Пример:

<circle cx="250" cy="25" r="25"/>

ellipse задается схоже с circle, но предполагается, что радиус задается по двум осям: по х и по у. Вместо х используйте rx, вместо y — ry.

<ellipse cx="250" cy="25" rx="100" ry="25"/>

line рисует линию. Используйте x1 и y1 для задания координат начала линии, и x2 и y2 для задания координат конца. Атрибут stroke должен задавать цвет линии, иначе она будет невидимая.

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

text отрисовывает текст. Используйте x, чтобы указать левый край, и y, чтобы указать вертикальную позицию так называемой базовой линии.

<text x="250" y="25">Easy-peasy</text>

Easy-peasy

текст будет наследовать CSS-стили шрифта родительского элемента, если только вы не зададите свои стили для текста. Обратите внимание, как форматирование текста выше совпадает с текстом, описываемом в этом параграфе. Мы может переопределить стили форматирования так:

<text x="250" y="25" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>

Easy-peasy

Также заметьте, когда любой визуальный элемент упирается в границу SVG-элемента, он будет обрезан. Будьте осторожны, когда используете text, чтобы ваши загагулины у текста не были обрезаны. Вы можете увидеть, что случится с текстом, если выставить baseline (то есть у) равным 50, такую же, как высота SVG:

<text x="250" y="50" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>

Easy-peasy

path рисует что-нибудь более сложное, чем фигуры, описанные выше(например, силуэт стран на геокартах), и будет описан отдельно. А теперь мы будем работать с простыми фигурами.

Стилизация SVG-элементов

По умолчанию любой элемент SVG имеет черную заливку и не имеет рамку. Если вы хотите что-то сверх этого, вам придется применить стили к вашему элементу. Общие SVG свойства перечислены ниже:

fill — заливка. Цветовое значение. Также как и в CSS цвет может быть указан несколькими способами:
- по имени: orange;
- значение в шестнадцатиричной системе счисления: #3388aa, #38a;
- значение в формате RGB: rgb(10, 150, 20);
- значение в формате RGBA: rgba(10, 150, 20, 0.5).
stroke — рамка. Цветовое значение.

stroke-width — ширина рамки(обычно в пикселях).
opacity — прозрачность. Числовое значение в промежутке от 0.0(полностью прозрачно) до 1.0(полностью видимо).

С text также можно использовать следующие свойства:

font-family
font-size

Существует два способа применения стилей к SVG-элементам: либо напрямую прописывать стили внутри элемента как его атрибуты, или через правила CSS.

Ниже некоторые CSS-свойства заданы непосредственно в элементе

circle:

<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>

По-другому мы могли бы сделать так: не прописывать атрибуты стиля, а указать класс стилей(также как и обычному HTML элементу):

<circle cx="25" cy="25" r="22"/>

а потом добавить fill, stroke и stroke-width параметры в CSS-стили необходимого класса:

.pumpkin {
    fill: yellow;
    stroke: orange;
    stroke-width: 5;
 }

Второй подход имеет несколько очевидных преимуществ:

Можно описать класс один раз и применять его ко многим элементам.
CSS-код проще воспринимать, чем атрибуты внутри элементов.

По этим причинам второй подход более прост в обслуживании, а также он быстрее применим.

Использование CSS для применения стилей к SVG, однако, может кого-то привести в замешательство. fill, stroke, stroke-width все-таки не CSS-свойства(ближайшие CSS-эквиваленты это background-color и border). Чтобы помочь вам запомнить, какие правила в таблице стилей указаны для SVG-элементов, желательно включать svg в CSS-селектор:

svg .pumpkin {
    /* ... */
}

Наложение и порядок их рисования

В SVG нет как таковых слоев и никакого понятия глубины. SVG не поддерживает CSS-свойство

z-index, таким образом фигуры могут быть упорядочены в рамках двухмерного пространства.

И еще, если нарисовать несколько фигур, то они перекрываются:

<rect x="0" y="0" fill="purple"/>
<rect x="20" y="5" fill="blue"/>
<rect x="40" y="10" fill="green"/>
<rect x="60" y="15" fill="yellow"/>
<rect x="80" y="20" fill="red"/>

Порядок, в котором элементы указаны в коде, определяет их глубину. Фиолетовый квадрат указан в коде первым, поэтому первым он и отрисовывается. Дальше рисуется синий квадрат над фиолетовым, дальше зеленый над синим и фиолетовым и т.д.

Думайте так, будто SVG-фигуры рисуются на холсте. Цвет, который применяется позже всех, закрашивает остальные цвета, оказываясь «впереди».

Этот аспект рисования порядка становится важным, когда у вас есть несколько визуальных элементов, которые не должны быть ничем перекрыты. Например, у вас могут быть оси или метки значений на осях, которые появляются на диаграмме рассеивания. Оси и метки должны быть добавлены в SVG в конце, чтобы они появились перед остальными элементами и были видны.

Прозрачность

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

Существует два способа применить прозрачность: использовать RGB-цвет с альфа-каналом или установить свойству opacity числовое значение.

Вы можете использовать rgba() везде, где надо указать цвет, например в атрибутах fill и stroke. rgba() ожидает, что вы передадите ему 3 значения в промежутке от 0 до 255 для красного, зеленого и синего, плюс альфа-канал(прозрачность) в диапазоне от 0. 0 до 1.0.

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>

Заметьте, что с методом rgba(), прозрачность применяется к fill и stroke атрибутам независимо. Заливка следующих кругов на 75% прозрачна, а их рамка — на 25%:

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>

Для применения прозрачности ко всему элементу, необходимо установить атрибут opacity. Ниже полностью видимые круги:

а это те же круги с различной прозрачностью:

<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10" opacity="0.1"/>

Вы также можете использовать атрибут opacity у элемента, цвета которого заданы в формате rgba()

. Когда вы это делаете — прозрачность умножается. Ниже круги используют те же значения цвета RGBA для fill и stroke. У первого элемента не установлен атрибут opacity, а у двух других установлен:

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0. 75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/>

Обратите внимание, что у третьего круга

opacity равно 0.2 или 20%. Тем не менее его фиолетовая часть имеет прозрачность в 75%. Таким образом, фиолетовая часть в конечном итоге прозрачна на 0.2*0.75 = 0.15 или 15%.

Чтобы увидеть большее количество примеров с использованием SVG, включая path, маски, фильтры и т.д. — смотрите SVG пример для браузеров, автором которых является David Dailey.

Автором оригинального текста книги D3 Tutorials является Scott Murray
На русский язык перевел Ivanov Sergey. 2014 год

Что можно сделать на javascript примеры

JavaScript Введение

Эта страница содержит несколько примеров того, что JavaScript может сделать.

JavaScript может изменять содержимое HTML

Одним из многих HTML-методов JavaScript является getElementById ().

В этом примере метод используется для «поиска» HTML-элемента (с идентификатором = «Demo») и изменяет содержимое элемента (InnerHtml) на «Hello JavaScript»:

Пример

JavaScript принимает как двойные, так и одинарные кавычки:

Пример

JavaScript может изменять значения атрибутов HTML

В этом примере JavaScript изменяет значение атрибута src (Source) тега <img>:

Лампочка

JavaScript может изменить HTML стили (CSS)

Изменение стиля элемента HTML является вариантом изменения атрибута HTML:

Пример

JavaScript может скрывать элементы HTML

Скрытие элементов HTML может быть выполнено путем изменения стиля отображения:

Пример

JavaScript может отображать HTML-элементы

Отображение скрытых элементов HTML также может быть выполнено путем изменения стиля отображения:

10 полезных скриптов JavaScript

JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.

В данном уроке мы приводим 10 полезных скриптов, которые помогут вам сохранить время при решении общих задач. Большинство из приведенных скриптов можно просто скопировать в свой проект, но лучше проделать аналитическую работу, чтобы адаптировать код наилучшим образом.