Canvas — это элемент, добавленный в HTML5, который позволяет рисовать на странице в реальном времени. Он похож на <div> тем, что это блочный элемент, используемый для структурирования информации на веб-странице, но гораздо сложнее в том, что вы можете с ним делать. Чтобы создать элемент холста, вы просто вставляете <canvas></canvas> в HTML, как и любой другой элемент. Вы должны инициализировать его высотой и шириной, но также иметь возможность добавить любые другие атрибуты HTML, такие как граница, через атрибут style. Тогда инициализация элемента canvas может выглядеть следующим образом:
Это все, что вам нужно написать в HTML или CSS. Все остальное делается на JavaScript. Сейчас полотно не очень интересное. Это то же самое, что и пустой div с рамкой вокруг него. Что отлично от холста, так это то, что теперь он позволяет вам использовать функции JavaScript, специфичные для элементов холста. Чтобы настроить их, вы должны сначала сохранить холст в переменной JavaScript, например:
var canvas = document.getElementById("myCanvas")
Затем вы устанавливаете «контекст» для холста:
var ctx = canvas.getContext("2d")
getContext здесь вызывается для элемента холста (хранящегося как переменная) и принимает аргумент типа контекста. Тип контекста может быть:
- «2d»: создает контекст 2D-рендеринга.
- «webGL»: создайте контекст 3D-рендеринга.
- «webGL2»: создать контекст 3D-рендеринга с добавленными методами («экспериментальный» контекст)
- «bitmaprenderer»: заменяет содержимое холста на ImageBitmap.
Создав контекст, теперь вы можете использовать методы, назначенные ctx, для рисования на холсте с помощью JavaScript. Для целей этой презентации я буду использовать контекст «2d». Одна из самых простых вещей, которые вы можете сделать с этим новым контекстом, — это провести линию. Для этого вы сначала устанавливаете «начальную точку» в определенную координату:
ctx.moveTo(0,0)
Затем вы переходите от этой начальной точки к конечной точке.
ctx.lineTo(50,50)
Наконец, вы «рисуете» линию через ctx.stroke()
Контекст 2d позволяет использовать множество других методов, которые можно найти здесь. Некоторые из них, например, включают в себя рисование прямоугольников и кругов и их заливку с использованием градиентов. Я поэкспериментировал с некоторыми из них здесь http://codepen.io/depaolif/pen/pNdKOZ.
Что делает холст особенно интересным, так это то, что, поскольку все рисование выполняется с помощью JavaScript, вы можете комбинировать методы рисования холста с обработчиками событий, что приводит к высокоинтерактивным элементам HTML, как в этой кодовой ручке: http://codepen.io/tholman/ полный/lDLhk/.
Вы также можете добавить элемент случайности во все, что вы разрабатываете, чтобы каждый раз, когда функция запускается, она создавала что-то новое. Вот пример того, что я создал, используя пошаговое руководство по проектированию фракталов: http://codepen.io/depaolif/full/ZeLLjv/.
Источники:
http://thecodeplayer.com/walkthrough/create-binary-trees-using-javascript-and-html5-canvas
https://www.w3schools.com/html/ html5_canvas.asp
Первоначально опубликовано на сайте frederico-de-paoli.com 23 марта 2017 г.
