Эти замечательные Canvas

Рейтинг:   / 0
ПлохоОтлично 

статья давно чатично написана но не опубликована.. собственно дописывать её я смысла не вижу уже. ибо буду писать на иные темы


HTML5 - icon

Android - icon iOS - icon

Всё размышлял я и размышлял куда же это мне поместить сию статью? То ли в Android раздел, то ли в раздел iOS. Выбрал ту OS, которая вызвала во мне более позитивный отклик и принвнесла многое новое в решения пользовательского интерфейса на базе WEB-Application / WebKit.


О Canvas.

Давайте поговорим немного о самих этих Canvas.

Из истории: впервые элемент canvas был представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari. Поддержка canvas в Gecko появилась в версии 1.8 (версия 1.5 браузера Firefox), в Presto с версии 9.0 браузера Opera. В Internet Explorer 9 поддержка canvas реализована только начиная с версии Platform Preview 3. Ранее ситуацию с отсутствием canvas в IE исправила компания Google, выпустившая собственное расширение, написанное на JavaScript, под названием ExplorerCanvas.

Итак, давайте разберёмся что он есть этот "холст". Представьте себе, что у вас есть этакий Paint инструмент, ну как бы IMG-тэг, но только таков, который в себе кроет кучу неких настроек, управляемых определённым способом и способный реализовать втури себя возможности, пускай и несколько тривиальные, но... способности рисования. Всякие shape, circle, arc и прочие примитивы... заливки, прозрачности, полупрозрачности и прочие "секси" вещи, которые хотелось бы, но ни как не реализуемо с помощью CSS3.

Надеюсь, слово ХОЛСТ всем понятно и дополнительных пояснений не просит? Холст эта та - база с которой традиционно начинает хуоджник свою работу, конечно если ему нужен холст и когда он пишет используя мольберт, руки и краски, а не жопу и собственные экскременты для "создания". Скажу честно, бывают такими не только художники и гавнокод это не выдумки бесноватых тестеров ;).

Для программиста, а тут уже ни как иначе человека, "верстающего" этот объект, не назвать, поскольку требуется знание не только HTML, а JavaScript. почему? Да потому, что у тэга <canvas> имеет всего-то пару атрибутов: width и height. Ну и - id. Скажете обязательный? Ну.. это с какой стороны посмотреть, если холст у вас один по можно и без него, а если у вас их много, так уж, куда без чёткой идентификации деться?

Пример:

<canvas id="myCanvas" width="200" height="100"></canvas>

Как видите - не казист и малоэротичен, как девушка-простушка, вроде знаешь, что классная, что способная, но простушка... Вот так же и с canvas. Пока в душу не заглянешь не узнаешь.

Однако хочется заметить, ни кто не отменял арибут style, так шта, к примеру, style="border:1px solid red;" вполне жинеспособен. Будет вам белый квадрат в красной рамке.

 

Рисуем в canvas.

Как я писал выше, рисование на холсте выполняется путём использования JavaScript.

Например:

<script>
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#000";
   ctx.fillRect(0,0,150,75);
</script>

Что выйдет? Да всё тот же прямоугольник, только чёрный внутри красной рамки, что мы в стиле указали.

Т.е.:

  1. получить каким-то-там образом наш холст, аки HTML елемент
  2. из него получить созданный движком браузера контекст объекта холста, дабы начать им манипулировать всячески
  3. всячески начать манипулировать на основе вашего воображения и в рамках дозволеного ;)

На вражеском наречии getContext описывают следующим образом:

The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.

Т.е. в это дело можно размещать path, box, circle, text, image и прочие (под прочим: комбинирование графических примитивов, обводка, закрашивание, градиенты).

 

Холст и координаты.

0,0 X
Y  

 

Canvas - Paths

Отрисовка сплошных линий на холсте выполняется путём "перемещения" линии от к и далее к... пока не вызовите комманду "нарисовать":

  • moveTo(x,y) начало сплошной линии
  • lineTo(x,y) конечная точка сплошной линии

Покраску линии делаем ink функцией. Комманда - отрисоватьлинию по указанной вами ломаной - stroke().

Например:

ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Диагональная линия внутри нашего прямоугольника.