Различия

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


canvas [2025/07/06 12:38] (текущий) – создано - внешнее изменение 127.0.0.1
Строка 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>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!