Различия

Показаны различия между двумя версиями страницы.

@@ Строка 1: / Строка 1: @@
+====== Canvas ======
+  * [[http://www.w3.org/TR/2dcontext/|HTML Canvas 2D Context]]
+  * [[http://xiper.net/manuals/canvas/|Справочник HTML5 Canvas]]
+**Canvas** (англ. canvas — «холст») — элемент [[HTML5]], предназначенный для создания растрового изображения при помощи [[JavaScript]].
+<note important>Разница	между холстом (canvas) и [[SVG]] в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют.	Единственным	способом сдвинуть форму на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.</note>
+**Элементу canvas можно задать ширину и высоту** (по умолчанию 300*150px), таким образом определяя его размер в пикселях. Новый холст	пуст, то есть он полностью прозрачен и показывает нам пустое пространство документа.
+Тэг canvas поддерживает разные стили рисования. Сейчас есть два широко распространенных стиля рисования: “2d” для двумерной графики и WebGL для трёхмерной графики.
+**[[CSS]] и canvas.** Для добавления рамок, полей и т.п. можно использовать CSS. Некоторые атрибуты CSS наследуются содержимым canvas, такие как шрифты.
+  * Вставка изображение в элемент canvas<file javascript>
+<canvas id="cn_square"></canvas>
+        <script>
+            var img1 = new Image();
+            img1.src = "canvas/img1.jpg";
+            // Отобразить файл сразу после загрузки
+            img1.onload = function () {
+                drawTrails();
+            }
+            function drawTrails() {
+                var canvas = document.getElementById('cn_square');
+                var context = canvas.getContext('2d');
+                context.translate(10, 10);
+                context.fillStyle = '#339900';
+                context.fill();
+                context.drawImage(img1, 5, 5, 20, 20);
+            }
+        </script>
+</file>

АйТи бубен

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы