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

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


canvas

Различия

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

Ссылка на это сравнение

canvas [2015/05/22 12:20] (текущий)
Строка 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>​
canvas.txt · Последние изменения: 2015/05/22 12:20 (внешнее изменение)