Для получения подробной информации, HTML5 Canvas Common API Резюме (2) -Drawing API

Canvas может нарисовать много замечательных стилей и красивых эффектов.

При рисовании холст эквивалентен тканям, а контекст эквивалентен кистям.

Moveto (x0, y0): переместите текущую кисть (ICTX) в эту позицию (x0, Y0).

Lineto (x1, y1): нарисуйте прямую линию из текущей позиции (x0, Y0) до (x1, y1).

startPath (): открыть путь или сбросить текущий путь.

ClosePath (): Вернуться к начальной точке пути от текущей точки, то есть положения предыдущего начала, избегания и пути.

Incke (): Draw. Эта функция должна быть добавлена ​​для рисования изображений, поэтому она должна быть размещена в конце.

 var Icanvas = Document.getElementById (ICANVAS); ();

Эффект:

Обратите внимание, что если ClosePath находится за функцией хода, он не будет втянут в закрытую линию, потому что он нарисован до закрытой, поэтому прямая линия слева не будет нарисована.

LineCap: Line Endpoint Style, Butt, Rand, Square.

Linejoin: Стиль поворота. Когда две линии пересекаются.

Mitrelimet: если длина осадка превышает значение Mitherlimit, угол будет отображаться в линейном суставе.

Ширина линии: ширина линии

Strokestyle: цвет линии, градиент (определенный объект градиента), режим. context.strokesty =#333;

 var icanvas = document.getelementbyid (icanvas); 10); Черный диагональ снова, в общей сложности 3 строки. Ictx.strokestyle =#000000;

Beginpath и ClosePath не могут появиться в парах.

Arc (x, y, Radius, StartAngle, Endangle, против часовой стрелки): кривая нарисуйте, радиус - это радиус кривой, стартовый, запускающий угол начального и угол окончания, с дугой (Math.pi/180) Предметы

Arcto (x1, y1, x2, y2, radius): нарисуйте кривую перед двумя линиями вырезания.

 Ictx.beginpath (); / Создать Arcs ictx.lineto (150,120);

Нарисуйте соединение начальной точки и горизонтальной конечной точки горизонтальной линии с конечной точкой настройки горизонтальной линии.

Quadraticcurveto (x1, y1, x2, y2): две кривая Бесселя. (X1, y1) Координаты контрольной точки, (x2, y2) Координаты конечной точки

Beziercurveto (x1, Y1, x2, y2, x, y): три кривые Бесселя. (X1, y1) Координаты контрольной точки 1, (x2, Y2) Координат 2 Координаты (x, y) конечные точки.

Кривая Бесселя очень полезна при рисовании очень гладких кривых.

Rect (): создать прямоугольник;

FILECT (x, y, ширина, высота): нарисуйте заполненный прямоугольник: (x, y) Отдельная точка, ширина, высота прямоугольная ширина высота высота высота высота

Strokerect (): нарисуйте прямоугольную проволочную раму

ClearRect (): очистить прямоугольник.

 Ictx.fillstyle =#0000ff;

FillStyle: установите цвет, градиент или рисунок (Паттен);

Strokestyle: цвет, градиент или рисунок кисти

Shadowcolor: Shadow Yanse

Shadowblur: размытый уровень

ShadowOffSetx: горизонтальное расстояние от тени

ShadowOffSety: вертикальное расстояние от тени

 Ictx.shadowblur = 20;

CreateLinearGradient (x1, Y1, X2, Y2): нарисовать линейный градиент, (x1, y1) является отправной точкой градиента, (x2, y2) является конечной точкой градиента.

CreateRadialGradient (x1, Y1, R1, X2, Y2, R2): радиальный градиент: (x1, y1) является отправной точкой градиента, R1 - радиус, (x2, Y2) - конечная точка градиента, R2 это радиус конечной точки;

Оба класса необходимо использовать

AddColorsStop (Stop, Color) установлен для установки процесса градиента, а значение составляет от 0,0 до 1,0.

 var grd = ictx.createlinearadient (0,0,170,0); // Градиент здесь представляет собой объект, который используется для прохождения значения для заполнения (200 1550 150100);

CreatePattern (изображение, повторение | repeat-x | repeat-y | no-repeat): изображение является объектом изображения, а последующие параметры используются для установки повторяющегося метода изображения.

Fill (): заполните текущий путь.

ispointinpath (): ictx.ispointinpath (x, y);

Удалите холст: Получите ширину и высоту холста, Icanvas.height, Icanvas.width;

Измените ширину холста: icanvas.width = '200';

Globalpha: Установите прозрачность, только 0 ~ 1 число.

Todataurl: Icanvas.todataurl (тип, Encderoptions), эта функция возвращает URI изображения64 в изображении, доступны параметры, тип может устанавливать типы изображений, такие как изображение/JPEG, изображение/Webp, по умолчанию - изображение/P по умолчанию NG; Является ли число 0 ~ 1, чтобы установить качество изображения/JPEG, изображение/WebP, и введите другие форматы, устанавливающие этот параметр недействителен.

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

 ICTX.ARC (100,100,50, (Math.pi/180)*0, (Math.pi/180)*360, True); ;

Если вы все еще хотите управлять внешним холстом, используйте функцию Save () для сохранения перед резкой и используйте функцию Restore () для восстановления ранее сохраненного состояния после резки, но операция в середине не исчезнет.

Выше всего содержимое этой статьи.