Статьи

Краска на холсте, как Ван Гог

Декабрь 12, 2018

Я читал « Погружение в HTML 5» , отличную книгу Марка Пилигрима, в которой рассказывается о многих аспектах и ​​нововведениях HTML 5. Как всегда, я думал, что одного чтения недостаточно, и для улучшения своего обучения я начал заниматься с помощью браузера. Практика, безусловно, является лучшим способом хранения информации по сравнению с простым чтением и изучением, и вынуждает вас немедленно решать возможные проблемы при кодировании с этими новыми функциями.

Итак, сегодня я хочу представить вам элемент <canvas> , который я взломал в течение некоторого времени. Холст, как следует из его правильно подобранного названия, — это окно для рисования, которое вы можете заполнить тем, что хотите. В случае HTML 5 его можно заполнить с помощью JavaScript, поскольку DOM отражает наличие элемента, как если бы это был <div> или <input>, и предоставляет набор методов, которые можно использовать для рисования. ,

Будут ли использоваться методы напрямую или через графическую библиотеку JavaScript, будет определено в будущем: сейчас узнать, что может <холст> и как это сделать, — приемлемая цель. Одним из достижений HTML 5 является необходимость в меньшем количестве библиотечной работы, в идеале за счет реализации в браузере распространенных обходных путей, присутствующих в JQuery, Dojo и аналогичных продуктах.

Поэтому я не буду пытаться кодировать сложные примеры, такие как яркие, движущиеся дожди и древние картины, а просто то, что вам нужно для начала. Элемент <canvas> поддерживается в Firefox 3, где этот код был протестирован, и во многих других браузерах.

Дополнения в DOM

<Canvas> — это блочный элемент с определенной высотой и шириной (а также границами, полями и отступами, если хотите.) Если вы берете элемент DOM с помощью JavaScript, вы можете затем вызвать любой метод для рисования линий и прямоугольников, или раскрасить картинку.

Механизм не требует JavaScript кунг-фу: вы можете найти элемент через document.getElementById (), как и в случае всех остальных, и многие свойства и параметры методов следуют CSS-подобным значениям (шрифт, цвет), как в большинстве Привязки JavaScript.

Холст имеет систему координат, которая начинается с верхнего левого угла, как и в любой компьютерной графической системе (это соглашение изначально было заимствовано у телевизоров).

Получив доступ к холсту, вы можете запросить его контекст , который является основным объектом холста, где вы вызываете каждый отдельный метод. Пока существует только 2-й контекст, но есть возможность включения нескольких функций в будущем.

Помимо контекста, другой важной концепцией является путь : набор элементов с одинаковыми свойствами стиля (например, цвет), которые можно рисовать и управлять ими одновременно. Всякий раз, когда вы хотите начать рисовать изолированный набор линий, например, с новым причудливым цветом, вы, вероятно, захотите создать новый путь, чтобы ваши изменения стиля штриховки не отражались на всем чертеже.

В примере кода также показан рисунок прямоугольников и вставка текста. У меня есть привычка генерировать графики и изображения на стороне сервера, например, с расширением PHP gd , но наличие элемента на стороне клиента может заставить меня передумать. Решение на стороне клиента также снизит нагрузку на сервер, полностью исключая создание и кэширование динамических изображений, и просто возвращает простой ответ JSON, который может интерпретироваться клиентом HTML 5. Сегодня это нужно делать с тяжелыми апплетами JavaScript или Flash, в то время как основанный на холсте график загружается почти сразу.

Больше возможностей

Некоторые функции здесь не рассматриваются, но имейте в виду, что они доступны в большинстве браузеров, которые начали реализацию проекта спецификации HTML 5. Например, вы можете нарисовать:

  • дуги и круги
  • Кривые Безье
  • изображения путем вставки (уже существующие).

Соедините возможности динамического рисования с событиями DOM и обработчиками JavaScript, и вы получите отличную интерактивность почти без внешних библиотек. Например, браузерные игры мгновенно становятся проще в написании кода и более производительными, чем их аналоги только для JavaScript.

Я слишком много говорил на сегодня, поэтому давайте дадим вам мой код. Здесь реализованы основные функции <canvas>: не стесняйтесь вставлять его в пустой HTML-документ и начинать хакерство в браузере или предлагать, что исследовать дальше.

<canvas id="drawing" width="400" height="400" style="border: 1px solid black;"></canvas>
<script type="text/javascript">
window.onload = function() {
    var context = document.getElementById('drawing').getContext('2d');

    // draw a 200x300 rectangle with top left vertix at (10, 40)
    //context.fillRect(10, 40, 200, 300);

    // draw a square with top left vertix at (x, y), side l
    draw_square = function(x, y, l, color) {
        context.beginPath();
        context.moveTo(x, y);
        context.lineTo(x + 50, y);
        context.lineTo(x + 50, y + 50);
        context.lineTo(x, y + 50);
        context.lineTo(x, y);
        context.strokeStyle =  color;
        context.stroke();
    };

    // draw multiple squares
    for (x = 20, y = 20, blue = 0;
         x <= 340;
         x += 10, y += 10, blue += 5) {
            var color = 'rgb(0, 0,' + blue + ')';
            draw_square(x, y, 50, color);
         }

    // a caption
    context.font = "24px sans-serif";
    context.fillText('Black to blue', 50, 300);

    // prepare an oblique gradient and fill a rectangle with it
    // the gradient goes from (0, 0) to (400, 100)
    var gradient = context.createLinearGradient(0, 0, 400, 100);
    gradient.addColorStop(0, '#000');
    gradient.addColorStop(1, 'blue');
    context.fillStyle = gradient;
    context.fillRect(0, 0, 400, 100);
}
</script>

35
Share: