✅ HTML Canvas - Топ 5 примеров HTML-рисования на холсте

Введение в HTML Canvas

Введение в HTML Canvas

В этой статье мы увидим схему HTML Canvas. Как вы уже знаете, HTML - это язык разметки. Чтобы представить информацию посетителю, вы можете написать HTML с тем, какой текст показывать на дисплее и как он будет отображаться, например, размер шрифта, цвет, ориентация и т. Д. Когда дело доходит до добавления визуальных элементов на страницу, вам необходимо сделать ссылку и вставлять изображения на страницу, которые хранятся отдельно от файла HTML на вашем хосте.

Но что, если вам нужно что-то нарисовать на странице?

Что такое HTML Canvas?

HTML-холст (используется через тег) - это HTML-элемент, который используется для рисования графики (линий, столбцов, графиков и т. Д.) На экране компьютера пользователя на лету. Элемент canvas - это просто контейнер для информации, хотя рисование выполняется с помощью JavaScript. Он поддерживается всеми современными веб-браузерами, которые поддерживают HTML5 и могут отображать JavaScript. Создать холст HTML очень просто, и вы можете добавить его на любую страницу HTML с помощью следующего.

Синтаксис:

Content here

Вы можете определить размер холста с помощью атрибута width и height, в теге также может быть определен идентификатор элемента, который позволяет использовать CSS-стили для элемента canvas. Ниже приведен пример того, как вы можете нарисовать прямоугольник, используя элемент Canvas:

Код:

#examplecanvas(border:2px solid green;)

Выход:

Примеры HTML Canvas Drawing

Теперь, когда вы увидели, как можно нарисовать прямоугольник с помощью элемента canvas, давайте рассмотрим некоторые другие объекты, которые можно нарисовать с помощью элемента на экране вывода браузера.

1. Рисование линии на странице

moveTo (), stroke () и lineTo () - это методы, которые можно использовать для рисования прямых линий на веб-странице. Как вы можете догадаться, moveTo () сообщает положение курсора в пространство элемента, а lineTo () - это метод, который сообщает конечную точку линии. Штрих () делает линию видимой. Вот код для вашей справки:

Код:

Canvas Line Example canvas ( border: 2px solid black; ) window.onload = function() ( var canvas = document.getElementById("examplecanvas"); var context = canvas.getContext("2d"); context.moveTo(10, 150); context.lineTo(350, 100); context.stroke(); );

Выход:

2. Рисование круга на холсте HTML

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

Синтаксис:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

Вот пример страницы с кружком:

Код:

Canvas with a circle canvas ( border: 3px solid red; ) window.onload = function() ( var canvas = document.getElementById("examplecanvas"); var context = canvas.getContext("2d"); context.arc(250, 150, 90, 0, 2 * Math.PI, false); context.stroke(); );

Выход:

3. Рисование текста в холсте HTML

Текст также может быть нарисован в HTML-холсте. Чтобы получить текст на свой холст, вы можете подать в суд на метод filltext (). Ниже приведен пример HTML-страницы, которая содержит текст внутри элемента canvas:

Код:

canvas with text inside the element canvas ( border: 3px solid red; ) window.onload = function() ( var canvas = document.getElementById("examplecanvas"); var context = canvas.getContext("2d"); context.font = "bold 28px Arial"; context.fillText("This is text inside a canvas", 60, 100); );

Выход:

4. Рисование дуги внутри HTML-холста

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

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

Ниже приведена HTML-страница с дугой внутри элемента canvas:

Код:

Arc inside an HTML Canvas canvas ( border: 3px solid red; ) window.onload = function() ( var canvas = document.getElementById("examplecanvas"); var context = canvas.getContext("2d"); context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false); context.stroke(); );

Выход:

5. Рисование линейного или кругового цветового градиента

Вы можете использовать этот метод для createLienearGradient () для рисования градиентов по вашему выбору внутри элемента canvas. С этим методом вам придется использовать addColorStop () для обозначения градиентных цветов.

Синтаксис:

var gradient = context.createLinearGradient(startX, startY, endX, endY);

Вот страница с линейным градиентом:

Код:

If you are seeing this. the browser does not support the HTML5 canvas. var c = document.getElementById("examplecanvas"); var ctx = c.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, "green"); gradient.addColorStop(1, "red"); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 300, 150);

Выход:

Аналогично, метод рисования круговых градиентов - createRadialGradient ().

Синтаксис:

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

Код:

If you are seeing this. the browser does not support the HTML5 canvas. var c = document.getElementById("examplecanvas"); var ctx = c.getContext("2d"); var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90); gradient.addColorStop(0, "blue"); gradient.addColorStop(1, "yellow"); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 150, 80);

Выход:

Вывод

Теперь, когда вы знакомы с тем, что такое холст HTML и как его можно использовать на веб-страницах, вы должны чувствовать себя более уверенно в своих навыках веб-дизайна. Хотя изображения могут использоваться в некоторых случаях, преимущество HTML canvas заключается в том, что он масштабируется и намного легче с точки зрения размера и вычислительной мощности.

HTML Canvas - Топ 5 примеров HTML-рисования на холсте