Оглавление:
Видео: 1.3: Basics of drawing - p5.js Tutorial 2024
Несколько примитивных фигур можно нарисовать непосредственно на графическом контексте элемента холста HTML5. Наиболее распространенными формами являются прямоугольники и текст, которые также могут иметь тени. Вот как вы их создаете.
Рисование прямоугольников с холстом HTML5
Вы можете нарисовать три разных типа прямоугольников, как показано на рисунке:
-
clearRect (x, y, w, h) : Стирает прямоугольник с верхним левым углом (x, y) и размером (w, h). Обычно стирание рисуется в фоновом режиме цвет.
-
fillRect (x, y, w, h) : Рисует поле с верхним левым углом (x, y) и размером (w (h, y, w, h)
-
: Рисует прямоугольник с верхним левым углом (x, y) и размером (w, h). Коробка не заполнена, но контур рисуется в определяемом в текущий момент штрихStyle и usi Текущая строка.
function draw () {var drawing = document. getElementById ("рисунок"); var con = рисунок. getContext ("2d"); против. fillStyle = "красный"; против. strokeStyle = "зеленый"; против. lineWidth = "5"; против. fillRect (10, 10, 180, 80); против. strokeRect (10, 100, 180, 80);} // end draw
Рисование текста с холстом HTML5
Первым шагом в рисовании текста является выбор шрифта. Шрифты холста создаются путем назначения шрифта атрибуту шрифта контекста. Шрифты определяются как однострочное назначение шрифтов в CSS. Вы можете указать все характеристики шрифта в том же порядке, что и при использовании ярлыка шрифта: стиль, вариант, вес, размер и семейство.
Когда вы будете готовы отображать фактический текст на экране, используйте метод fillText (), который принимает три параметра: отображаемый текст и положение X и Y левой стороны текста. Следующий код привел результаты на рисунке:
function draw () {var drawing = document. getElementById ("рисунок"); var con = рисунок. getContext ("2d"); // очистить фон. fillStyle = "белый"; против. fillRect (0, 0, 200, 200); // нарисуем шрифт в красном кон. fillStyle = "красный"; против. font = "20pt sans-serif"; против. fillText («Холсты холмов!», 5, 100); против. strokeText («Холсты холстов!», 5, 130);} // конец рисунка