Программирование HTML5 Canvas API

Автор：Eve Cole Время обновления：2025-04-04 20:48:02

пытаться

{

document.createElement ("canvas"). getContext ("2d");

document.getElementById ("поддержка"). innerHtml = "ok";

}

поймать (e)

{

document.getElementById ("поддержка"). innerHtml = e.message;

}

</script>

Присоединяйтесь к холсту

// Получить элемент Canvas и его контекст рисования var canvas = document.getelementbyid ("Diagonal");

var context = canvas.getContext ("2d");

// Создать путь с абсолютными координатами

context.beginpath ();

context.moveto (70, 140);

context.lineto (140, 70);

// Нарисуйте эту линию на холсте

Context.Stroke ();

Преобразование

Те же эффекты, что и выше, могут быть достигнуты путем преобразования (масштабирование, трансляция, вращение) и т. Д.

Нарисуйте диагональные линии путем преобразования

// Получить элемент холста и его контекст рисования

var canvas = document.getElementbyId ("Diagonal");

var context = canvas.getContext ("2d");

// Сохранить текущий статус чертежа

context.save ();

// переместить контекст чертежа в нижний правый

Context.translate (70, 140);

// Нарисуйте тот же сегмент линии, что и предыдущий с началом начала, как и начальная точка

context.beginpath ();

context.moveto (0, 0);

context.lineto (70, -70);

context.stroke (); context.restore ();

путь

Пути в API холста HTML5 представляют собой любую форму, которую вы хотите отображать.

beginpath (): независимо от того, какой график вы начинаете рисовать, первое, что вам нужно назвать, это BeginPath. Эта простая функция не принимает параметров и используется для уведомления Canvas о том, что она собирается начать рисовать новый график.

Moveto (x, y): нет рисунка, перемещайте текущую позицию в новую целевую координату (x, y).

Lineto (x, y): не только перемещает текущую позицию в новую целевую координату (x, y), но и проводят прямую линию между двумя координатами.

closePath (): эта функция ведет себя очень похоже на Lineto. Единственное отличие состоит в том, что ClosePath автоматически использует начальную координату пути в качестве целевой координаты. Он также сообщает об холсте, что нарисованная в настоящее время цифра была закрыта или сформировала полностью закрытую область, которая очень полезна для будущих заполнений и инсультов.

Нарисуйте навес сосны

Функция CreateCanopypath (context) {

// Нарисуйте навес дерева

context.beginpath (); context.moveto (-25, -50);

context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); // вершина дерева

context.lineto (0, -140); context.lineto (15, -110);

context.lineto (5, -110);

context.lineto (20, -80);

context.lineto (10, -80);

context.lineto (25, -50);

// Подключите начальную точку и закройте путь

context.closepath ();

} Функциональная чертежа () {

var canvas = document.getElementbyId ('Diagonal');

var context = canvas.getContext ('2d'); context.save ();

Context.translate (130, 250); // Создать путь, который выражает навес

CreateCanopypath (контекст); // Нарисуйте текущий путь

Context.Stroke ();

context.restore ();

} window.AddeventListener ("Load", Swittrails, True);

Стиль удара

Режим хода позволяет навеса выглядеть более реалистичным.

// широкий линии

context.linewidth = 4;

// точка соединения гладкого пути

context.linejoin = 'Round';

//цвет

context.strokestyle = '#6633300';

// Нарисуйте текущий путь

Context.Stroke ();

Заполнить стиль

context.fillstyle = #339900; context.fill (); Нарисуйте прямоугольник

Мы добавляем стволы к дереву

context.fillstyle = '#6633300'; context.fillrect (-5, -50, 10, 50); Нарисовать кривую

context.save ();

Context.translate (-10, 350);

context.beginpath (); // Первая кривая изгибается справа от верхней части

context.moveto (0, 0);

context.quadraticcurveto (170, -50, 260, -190); // Изгиб в нижний справа

context.quadraticcurveto (310, -250, 410, -250); // Нарисуйте путь в широком коричневом ударе

context.strokestyle = '#6633300';

context.linewidth = 20;

Context.Stroke (); // Восстановите предыдущее состояние Canvas

context.restore ();

Вставить изображение в холст

Вы должны подождать, пока изображение будет полностью загружено, прежде чем его можно будет работать. Браузеры обычно загружают изображения асинхронно при выполнении сценария страницы. Если вы попытаетесь представить изображение на холст до его полностью загруженного, то Canvas не будет отображать изображения. Поэтому обратите особое внимание на то, чтобы изображение было загружено перед рендерингом.

// Загрузите изображение

var bark = new Image ();

bark.src = "bark.jpg"; // После загрузки изображения, вызовите функцию чертежа

bark.onload = function () {

Касточки ();

}

Показать картинки:

// заполнить с помощью фонового шаблона как фонового контекста. РАВИМАЖ (кора, -5, -50, 10, 50); градиент

Использование градиентов требует трех шагов:

(1) Создать градиентный объект

(2) Установите цвет для объектов градиента и укажите метод перехода

(3) Установите градиенты для стилей заполнения или стилей хода в контексте

// Создать горизонтальный градиент третьего порядка, который используется в качестве текстуры туловища

var trunkgradient = context.createlineargradient (-5, -50, 5, -50); // Левый край ствола составляет средний коричневый цвет

TrunkGradient.AddColorStop (0, '#663300'); // Есть немного цвета, о котором можно поговорить в левой середине ствола дерева

TrunkGradient.AddColorStop (0,4, '#996600'); // Цвет правого края должен быть темнее

TrunkGradient.AddColorStop (1, '#552200'); // Заполните багажник градиентами

context.fillstyle = trunkgradient;

context.fillrect (-5, -50, 10, 50);

// Создать вертикальный градиент для проецирования навеса на багажнике

var canopyshadow = context.createlineargradient (0, -50, 0, 0);

// отправная точка градиента проекции - черный с прозрачностью 50%

canopyshadow.addcolorstop (0, 'rgba (0, 0, 0, 0,5)');

// направление вертикально вниз, и градиент быстро постепенно меняется, чтобы полностью прозрачно на очень коротком расстоянии, за пределами этой длины

// нет проекции на стволе дерева

canopyshadow.addcolorstop (0,2, 'rgba (0, 0, 0, 0,0)'); // Заполните градиент проекции на багажнике

context.fillstyle = canopyshadow;

context.fillrect (-5, -50, 10, 50);

Фоновое изображение

// Загрузите изображение

var gravel = new Image ();

gravel.src = "gravel.jpg";

gravel.onload = function () {

Касточки ();

} // заменить коричневые толстые линии на фоновые изображения

context.strokestyle = context.createPattern (гравий, «повтор»);

context.linewidth = 20;

Context.Stroke ();

Второй параметр контекста. CREATEPATTERN-это повторяемый маркер, а соответствующее значение может быть выбрано в таблице 2-1.

Метод плитки	значение
повторить	(По умолчанию) изображение будет выложено в двух направлениях
Repeat-x	Горизонтальная плоская плитка
повторный	Вертикальная плоская плитка
без повторения	Изображение отображается только один раз, а не плиткой

Зум

Функция масштабирования. Когда каждый параметр отображает изображение, он передает ему количество изображения, которое должно быть увеличено (или уменьшено) на оси этого направления. Если значение X равно 2, это означает, что все элементы на рисованном изображении станут вдвое шире. Если значение Y составляет 0,5, нарисованное изображение станет наполовину высоты.

// Нарисуйте первое дерево при x = 130, y = 250

context.save ();

Context.translate (130, 250);

Thrantree (контекст);

context.restore (); // Нарисуйте второе дерево при x = 260, y = 500

context.save ();

context.translate (260, 500); // Увеличьте увеличение высоты и ширины второго дерева, чтобы вдвое больше оригинала

context.scale (2, 2);

Thrantree (контекст);

context.restore ();

Повернуть

Поверните изображение

context.save ();

// параметры угла поворота находятся в радианах как единицы

Context.rotate (1.57);

context.drawimage (myimage, 0, 0, 100, 100); context.restore ();

Метод использования преобразования

// Сохранить текущий статус

context.save (); // значение x увеличивается с увеличением значения y. С помощью растягивающей трансформации,

// может создать наклонное дерево, используемое в качестве тени

// после применения преобразования все координаты умножаются на матрицу

Context.transform (1, 0,

-0,5, 1,

, 0); // В направлении оси Y измените высоту тени на 60%

Context.Scale (1, 0,6); // Заполните туловище черной прозрачностью 20%

context.fillstyle = 'rgba (0, 0, 0, 0,2)';

Context.FillRect (-5, -50, 10, 50); // Перекрасить дерево существующим эффектом тени

Createcanopypath (контекст);

context.fill (); // восстановить предыдущее состояние Canvas

context.restore ();

текст

Context.fillText (Text, X, Y, MaxWidth): Содержание текста текстового текста, x, y Указывает текстовую позицию, максимальная мощность является необязательным параметром, ограничивает положение текста.

context.stroketext (Text, x, y, maxwidth): Содержание текста, x, y Определяет текстовую позицию, максимальная мощность является необязательным параметром, ограничивает положение текста.

// рисовать текст на холсте

context.save (); // Размер шрифта - 60, шрифт - это влияние

context.font = "60px Impact"; // заполнить цвет

context.fillstyle = '#9966600';

//Центр

Context.textalign = 'center'; // Нарисуйте текст

context.filltext («Счастливые тропы!», 200, 60, 400);

context.restore ();

тень

Тени можно контролировать с помощью нескольких глобальных контекстных свойств

свойство	ценить	Примечание
Shadowcolor	Значения цвета в любом CSS	Прозрачность (альфа) может быть использована
ShadowOffSetx	Значение пикселя	Значение положительно, переместите тень вправо; это отрицательно, переместите тень влево
Shadowoffsety	Значение пикселя	Значение положительно, переместите тень вниз; это отрицательно, переместите тень вверх
Shadowblur	Гауссовая нечеткая ценность	Чем больше значение, тем более размытым края теней

// черный цвет, 20% прозрачность

context.shadowcolor = 'rgba (0, 0, 0, 0,2)'; // Перемещение 15px вправо и 10px влево

context.shadowoffsetx = 15;

context.shadowoffsety = -10; // слегка размытая тень

context.shadowblur = 2;

Данные пикселей

context.getimagedata (SX, SY, SW, SH): SX, XY определяет точку, SW: Ширина, SH: высота.

Эта функция возвращает три свойства: ширина, сколько пикселей на строку высота сколько пикселей на столбец

Данные куча массивов, содержащих значения RGBA (значения красный, зеленый, синий и прозрачность) каждого пикселя, полученного из холста.

context.putimagedata (Imagedata, DX, DY): позволяет разработчикам передавать набор данных изображения. DX, DY используется для указания смещения. При использовании функция перейдет к указанному положению Canvas, чтобы обновить

Отображает входящие данные пикселей.

Canvas.todataurl: данные, представленные в настоящее время на холсте, могут быть получены программно. Полученные данные сохраняются в текстовом формате, и браузер может проанализировать их в изображение.