Canvas

Canvas (англ. canvas — «холст») — элемент Использование HTML 5, предназначенный для создания растрового изображения при помощи JavaScript.

Разница между холстом (canvas) и Формат SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форму на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.

Элементу canvas можно задать ширину и высоту (по умолчанию 300*150px), таким образом определяя его размер в пикселях. Новый холст пуст, то есть он полностью прозрачен и показывает нам пустое пространство документа.

Тэг canvas поддерживает разные стили рисования. Сейчас есть два широко распространенных стиля рисования: “2d” для двумерной графики и WebGL для трёхмерной графики.

Основы работы с CSS и canvas. Для добавления рамок, полей и т.п. можно использовать CSS. Некоторые атрибуты CSS наследуются содержимым canvas, такие как шрифты.

  • Вставка изображение в элемент canvas
    <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>
PQ VPS сервера в 28+ странах.