Комментарий: Ширина по умолчанию и высота холста составляют 300 и 150. Чтобы избежать исключений, лучше всего использовать атрибуты дисплея, чтобы добавить их вместо использования CSS для добавления ширины и высоты. Ниже приведено краткое введение в меры предосторожности для использования холста. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для вас.
1. КИТАНСКИЕ УПРАВЛЕНИЕ ХТТПС://developer.mozilla.org/zh-cn/docs/canvas_tutorior2. Ширина по умолчанию и высота холста составляют 300 и 150. Чтобы избежать исключений, лучше всего использовать атрибуты дисплея, чтобы добавить их вместо использования CSS для добавления ширины и высоты.
3. Инструкции по добавлению браузеров, которые не поддерживают тег Canvas внутри тега Canvas
4. Вы также можете определить, поддерживает ли браузер холст через следующий код JS.
var canvas = document.getElementById ('Tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext ('2d');
// код рисования здесь
} еще {
// код Canvas-Un-
}
5. Canvas поддерживает только рисунок одной основной формы, то есть прямоугольника, но другие фигуры могут быть проведены по пути холста.
6. Есть четыре функции, чтобы нарисовать прямоугольник: прямое, заполнение, стрелка и прозрачный
7. Функция BeartPath используется для запуска нового слоя пути. Если не добавлено, это означает опираться на исходный слой пути. Эффекты следующих двух кодов совершенно разные. Первый код показывает две красные линии, а второй код показывает черную линию и красную линию.
var ctx = document.getElementbyId ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100,5,20,5);
Ctx.LineTo (200,5, 20,5);
ctx.stroke ();
ctx.moveto (100,5,40,5);
Ctx.LineTo (200,5, 40,5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.getElementbyId ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100,5,20,5);
Ctx.LineTo (200,5, 20,5);
ctx.stroke ();
ctx.beginpath ();
ctx.moveto (100,5,40,5);
Ctx.LineTo (200,5, 40,5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. Если путь не требуется для закрытия, можно использовать ClosePath. Если используется заполнение, путь будет автоматически закрыт. Нет необходимости больше использовать близкий путь.
9. Пока у вас есть достаточное терпение, вы можете использовать кривую Безье, чтобы нарисовать любую фигуру.
10. В квадратичной кривой есть ошибка в Firefox, поэтому кубическая кривая можно использовать вместо квадратичной кривой.
11. Изображения (такие как PNG, GIF, JPEG и т. Д.) Могут быть введены в холст, а другие элементы холста также могут использоваться в качестве источника изображения.
12. Ниже приведен базовый код чертежа изображения Can
DrawMage (Image, x, y)
Следующий код представляет собой увеличенное изображение, ширина и высота представляют масштабированный размер
DrawMage (изображение, x, y, ширина, высота)
Следующий код представляет изображение отсечения. Первый параметр такой же, как и другие, оба являются ссылками на то или иное изображение. Остальные 8 параметров, соответственно, представляют начальные x координаты вырезания на рисунке, начальные координаты y среза на рисунке, ширина области разреза, высота площади разреза, координаты x нарисованного положения, координаты y нарисованного положения, ширина нарисованной рисунки, высота нарисованной рисунки, размер натяжения, размер, натянутой на рисунок, размер, и размер, и размер, и размер натянута, и размер натянутой, и размер раскрасной, и размер раскрасной, и размер раскрасной. нарисованная картина.
DrawMage (Image, SX, SY, Swidth, Sheuett, DX, DY, Dwidth, Dheight)
13. Strokestyle используется для установки цвета графического контура, в то время как FillStyle используется для установки цвета заполнения. Цвет может быть строкой, градиентным объектом или объектом шаблона, представляющим значение цвета CSS. По умолчанию как линии, так и заполнения цвета черные (значение CSS Color #000000).
14. Прозрачность изображения может быть выражена с помощью GlobalALPHA = значение прозрачности или значения цвета RGBA
15. Свойство ширины Line устанавливает толщину линии тока. Чтобы решить ошибку ширины линии 1PX, для ее решения используется +0,5.
16. Линия на самой левой линии атрибута LineCap использует приклад по умолчанию. Можно отметить, что он промывается со вспомогательной линией. В середине есть эффект раунда, и в конечной точке добавляется полукруг с радиусом половины ширины линии. Справа находится эффект квадрата, с квадратом с равной шириной и высотой половины ширины линии, добавленной в конечной точке.
17. Здесь я также использую три полилилина в качестве примера для установки различных значений Linejoin. Верхний - это эффект круглого, края и углы округлены, а радиус круга равен ширине линии. Середина и дно являются последствиями скоса и миры соответственно. Когда значение будет митрои, сегмент линии будет выдвигаться за пределы соединения, пока оно не пересечет в одном месте. Эффект расширения ограничен атрибутом Mitherlimit, который будет представлен ниже
18. Методы сохранения и восстановления используются для сохранения и восстановления состояния холста, и ни один из них не имеет параметров. Состояние холста - это снимок всех стилей и деформаций, примененных к текущему экрану. Состояние холста сохраняется в виде кучи (стека). Каждый раз, когда называется метод сохранения, текущее состояние будет выдвинуто в кучу и сохранено. Каждый раз, когда называется метод восстановления, предыдущее сохраненное состояние появляется из кучи, и все настройки восстанавливаются.
19. Преобразование (1, 0, 0, 1, 0, 0) Параметры представляют горизонтальное масштабирование, горизонтальное вращение (по часовой стрелке), вертикальное вращение (против часовой стрелки), вертикальное масштабирование, горизонтальное смещение, вертикальное смещение
SetTransform (1, 0, 0, 1, 0, 0) означает сброс предыдущей матрицы преобразования, а затем создание новой матрицы. Параметры такие же, как и выше
Поверните (угол), (один радиус равен 1 радиану, 2πr/r = радиан, то есть 360 = 2π, то есть 1 = π/180)
20. Анимация на самом деле постоянно очищает артборд (clearRect ()), а затем перекрашивает ее