1. Введение в Canvas

​<canvas>ДаHTML5Недавно добавленный, позволяющий использовать скрипты (обычноJavaScript) для рисования изображений вHTMLэлементу.

Изначально он был создан компанией Apple для внутреннего использования собственногоMacOS X WebKitзапущен, чтобы приложения могли использовать такие компоненты, как Dashboard иSafariиспользование браузера. Позже кто-то черезGeckoбраузеры на ядре (особенноMozillaиFirefox)，OperaиChromeи Рабочая группа по технологиям гипертекстовых веб-приложений предложила использовать этот элемент для веб-технологий следующего поколения.

​CanvasявляетсяHTMLобласть для рисования, определяемая кодом вместе с атрибутами height и width.JavaScriptКод может получить доступ к этой области, подобно другим универсальным двумернымAPI, с помощью полного набора функций рисования для динамического создания графики.

Программы Mozilla поддерживают его начиная с Gecko 1.8 (Firefox 1.5)<canvas>, Internet Explorer начиная с IE9<canvas>. Chrome и Opera 9+ также поддерживают<canvas>。

2. Основы использования Canvas

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 <canvas>Элемент

​<canvas>выглядит так же, как<img>тег, за исключением того, что<canvas>имеет только два необязательных атрибутаwidth、heigthатрибуты, и никакихsrc、altатрибуты.

Если вы не<canvas>setwidht、heightэти атрибуты, то по умолчаниюwidthсоставляет 300,heightсоставляет 150, а единицы измерения — всеpx. Вы также можете использоватьcssатрибуты для установки width и height, но если атрибуты width и height не соответствуют исходному соотношению, изображение будет искажено. Поэтому рекомендуется никогда не использоватьcssатрибуты для установки<canvas>width и height.

Замещающее содержимое

Поскольку некоторые старые браузеры (особенно IE-браузеры до IE9) или браузеры не поддерживают HTML-элемент<canvas>, в этих браузерах вы всегда сможете отобразить замещающее содержимое.

Поддерживающие<canvas>браузеры будут отображать только<canvas>тег и игнорировать замещающее содержимое внутри. Браузеры, которые не поддерживают<canvas>будут напрямую отображать замещающее содержимое.

Заменить текстом:

<canvas>
    你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

использовать<img>Замена:

<canvas>
    <img src="./美女.jpg.html" alt=""> 
</canvas>

Закрывающий тег</canvas>нельзя опускать.

и<img>В отличие от элемента,<canvas>этому элементу нужен закрывающий тег (</canvas>). Если закрывающий тег отсутствует, остальная часть документа будет считаться замещающим содержимым и не будет отображаться.

2.2 Контекст рендеринга (Контекст рендеринга)

​<canvas>создаст canvas фиксированного размера и предоставит один или несколькоконтекстов рендеринга(кисть), чтобы использоватьконтекст рендерингадля рисования и обработки отображаемого содержимого.

Мы сосредоточимся на 2D-контексте рендеринга. Другие контексты пока изучать не будем. Например, WebGL использует 3D-контекст на основе OpenGL ES ("experimental-webgl").

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

2.3 Проверка поддержки

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

2.4 Шаблон кода

2.5 Простой пример

Следующий пример рисует два прямоугольника:

3. Рисование фигур

3.1 Сетка(grid)и пространство координат

Как показано на рисунке ниже,canvasэлемент по умолчанию покрыт сеткой. Вообще говоря, одна единица сетки эквивалентнаcanvasодному пикселю в элементе. Начало координат сетки — верхний левый угол с координатами (0,0). Положение всех элементов задаётся относительно начала координат. Поэтому верхний левый угол синего квадрата на рисунке имеет координаты (x, y), то есть x пикселей от левого края (ось X) и y пикселей от верхнего края (ось Y).

Позже мы рассмотрим перенос начала координат, вращение сетки, масштабирование и т. д.

3.2 Рисование прямоугольников

​<canvas>Поддерживается только один вид нативного рисования графики:Прямоугольник. Все остальные графические элементы требуют создания как минимум одного пути (path). Однако у нас есть много методов генерации путей, которые позволяют рисовать сложную графику.

canvas предоставляет три метода для рисования прямоугольников:

• 1, fillRect(x, y, width, height): Рисует заполненный прямоугольник.
• 2, strokeRect(x, y, width, height): Рисует границу прямоугольника.
• 3, clearRect(x, y, widh, height): Очищает указанную прямоугольную область, после чего эта область становится полностью прозрачной.

Пояснение:Эти 3 метода имеют одинаковые параметры.

• x, y: Относится к координатам верхнего левого угла прямоугольника. (Относительно начала координат canvas)
• width, height: Относится к ширине и высоте прямоугольника, который нужно нарисовать.

4. Рисование путей (path)

Основной элемент графики — путь.

Путь — это совокупность точек разных форм, образованная соединением отрезков линий или кривых разных цветов и ширины.

Путь, или даже подпуть, замкнут.

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

1. Создайте начальную точку пути
2. Вызовите методы рисования, чтобы нарисовать путь
3. Закрыть путь
4. После генерации пути отрисуйте графику путем обводки или заливки области пути.

Ниже перечислены необходимые методы:

1. beginPath()

   Создать новый путь. После успешного создания пути команды рисования графики направляются в путь для формирования пути.

2. moveTo(x, y)

   Переместить перо в указанные координаты.(x, y)Эквивалентно установке координат начальной точки пути.

3. closePath()

   После закрытия пути команды рисования графики перенаправляются в контекст.

4. stroke()

   Нарисовать контур фигуры линиями.

5. fill()

   Создать сплошную фигуру, заполнив область содержимого пути.

4.1 Рисование отрезков линий

4.2 Рисование границы треугольника

4.3 Заливка треугольника

4.4 Рисование дуг

Существует два метода для рисования дуг:

1, arc(x, y, r, startAngle, endAngle, anticlockwise): с(x, y)в качестве центра, сrв качестве радиуса, отstartAngleрадиан — начало, доendAngleрадиан — конец.anticlosewiseявляется логическим значением,trueуказывает на движение против часовой стрелки,falseуказывает на движение по часовой стрелке (по умолчанию — по часовой стрелке).

Примечание:

1. Все углы здесь выражены в радианах.

2. 0Радианы отсчитываются отxположительного направления оси.

   radians=(Math.PI/180)*degrees   //角度转换成弧度

2, arcTo(x1, y1, x2, y2, radius): Нарисуйте дугу на основе заданных контрольных точек и радиуса, а затем соедините две контрольные точки прямой линией.

arcToОписание метода:

Этот метод можно понять следующим образом. Дуга, которую нужно нарисовать, определяется двумя касательными.

Первая касательная: прямая, определяемая начальной точкой и контрольной точкой 1.

Вторая касательная: прямая, определяемая контрольной точкой 1 и контрольной точкой 2.

​Фактически нарисованная дуга — это дуга, касательная к этим двум прямым.

4.5 Рисование кривых Безье

4.5.1 Что такое кривая Безье

Кривая Безье, также известная как кривая Безье, — это математическая кривая, применяемая в приложениях двумерной графики.

Обычное программное обеспечение для векторной графики использует её для точного рисования кривых. Кривая Безье состоит из отрезков и узлов. Узлы — это перетаскиваемые опорные точки, а отрезки похожи на растягиваемые резиновые ленты. Инструмент «Перо», который мы видим в графических редакторах, используется для создания таких векторных кривых.

Кривые Безье — довольно важные параметрические кривые в компьютерной графике. Некоторые развитые растровые программы также имеют инструменты для работы с кривыми Безье, например PhotoShop. В Flash4 не было полноценного инструмента для кривых, но Flash5 уже предоставлял инструмент для работы с кривыми Безье.

Кривая Безье была широко опубликована в 1962 году французским инженером Пьером Безье, который использовал её для проектирования автомобильных кузовов. Изначально кривая Безье была разработана Полем де Кастельжо в 1959 году с использованием алгоритма де Кастельжо — численно устойчивого метода нахождения кривых Безье.

Кривая Безье первого порядка на самом деле является прямой линией.

Квадратичная кривая Безье

Кубическая кривая Безье

4.5.2 Рисование кривых Безье

Нарисуйте квадратичную кривую Безье:

quadraticCurveTo(cp1x, cp1y, x, y)

Описание:

• Параметры 1 и 2: координаты контрольной точки
• Параметры 3 и 4: координаты конечной точки

Нарисуйте кубическую кривую Безье:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Описание:

• Параметры 1 и 2: координаты контрольной точки 1
• Параметры 3 и 4: координаты контрольной точки 2
• Параметры 5 и 6: координаты конечной точки

5. Добавление стилей и цветов

В предыдущей главе о рисовании прямоугольников использовались только линии и цвета по умолчанию.

Если вы хотите раскрасить фигуру, есть два важных свойства, которые позволяют это сделать.

1. fillStyle = colorУстановите цвет заливки фигуры.

2. strokeStyle = colorУстановите цвет контура фигуры.

Примечания:

• 1. Цвет может быть строкой, представляющей значение цвета CSS, объектом градиента или объектом шаблона.
• 2. По умолчанию и цвет линий, и цвет заливки — чёрные.
• 3. Как только вы зададите значение strokeStyle или fillStyle, это новое значение становится значением по умолчанию для новых нарисованных фигур. Если вы хотите задать каждой фигуре другой цвет, нужно сбросить значение fillStyle или strokeStyle.

fillStyle

strokeStyle

Прозрачность

globalAlpha = transparencyValue: Это свойство влияет на прозрачность всех фигур на холсте. Допустимые значения находятся в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный), значение по умолчанию — 1.0.

​ globalAlphaЭто свойство довольно эффективно, когда нужно нарисовать много фигур с одинаковой прозрачностью. Однако я считаю, что использовать rgba() для установки прозрачности лучше.

1、стиль линии

Ширина линии. Она может быть только положительным значением. По умолчанию 1.0.

Линия, соединяющая начальную и конечную точки, является центром,Верхняя и нижняя части занимают по половине ширины линии.。

2. lineCap = type

Стиль окончания линии.

Доступны 3 значения:

1. butt: Конец отрезка заканчивается квадратом.

2. round: Конец отрезка заканчивается кругом.

3. square: Конец отрезка заканчивается квадратом, но добавляется прямоугольная область, ширина которой равна отрезку, а высота — половине толщины линии.

   var lineCaps = ["butt", "round", "square"]; for (var i = 0; i < 3; i++){ ctx.beginPath(); ctx.moveTo(20 + 30 * i, 30); ctx.lineTo(20 + 30 * i, 100); ctx.lineWidth = 20; ctx.lineCap = lineCaps[i]; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(0, 30); ctx.lineTo(300, 30); ctx.moveTo(0, 100); ctx.lineTo(300, 100) ctx.strokeStyle = "red"; ctx.lineWidth = 1; ctx.stroke();

   

   3. lineJoin = type

   В пределах одного пути задайте стиль соединений между линиями.

   Есть 3 значения.round, bevelиmiter：

   1. roundНарисуйте форму угла, заполнив дополнительный сектор, центр которого находится в конце соединяемой части. Радиус скруглённого угла равен ширине отрезка линии.

   2. bevelЗаполните дополнительную область треугольной формы в конце соединяемой части; каждая часть имеет собственный независимый прямоугольный угол.

   3. miter(По умолчанию) Продлите внешние края соединяемых частей так, чтобы они пересекались в точке, образуя дополнительную область ромбовидной формы.

      function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw();

   

   4. Пунктирные линии

   использоватьsetLineDashМетод иlineDashOffsetсвойство используется для определения стилей пунктирных линий.setLineDashМетод принимает массив для указания чередования сегментов линий и промежутков;lineDashOffsetСвойство задаёт начальное смещение.

   function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.setLineDash([20, 5]); //[длина сплошной линии, длина промежутка] ctx.lineDashOffset = -0; ctx.strokeRect(50, 50, 210, 210); } draw();

   

   Примечание: getLineDash() возвращает массив, содержащий текущий стиль пунктирной линии, с неотрицательной чётной длиной.

   ---

   6. Рисование текста

   Два метода рисования текста

   canvas предоставляет два метода для отрисовки текста:

   1. fillText(text, x, y [, maxWidth])Заполняет указанный текст в указанной позиции (x, y); максимальная ширина для рисования необязательна.

   2. strokeText(text, x, y [, maxWidth])Рисует контур текста в указанной позиции (x, y); максимальная ширина для рисования необязательна.

      var ctx; function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; ctx = canvas.getContext("2d"); ctx.font = "100px sans-serif" ctx.fillText("Если небо имеет чувства", 10, 100); ctx.strokeText("Если небо имеет чувства", 10, 200) } draw();

   

   Добавление стилей к тексту

   1. font = valueСтиль, который мы сейчас используем для рисования текста. Эта строка использует тот же синтаксис, что иCSS fontсвойство. Шрифт по умолчанию —10px sans-serif。

   2. textAlign = valueПараметр выравнивания текста. Возможные значения включают:start, end, left, right или center. Значение по умолчанию —start。

   3. textBaseline = valueПараметр выравнивания по базовой линии, возможные значения включают:top, hanging, middle, alphabetic, ideographic, bottom. Значение по умолчанию —alphabetic.。

   4. direction = valueНаправление текста. Возможные значения включают:ltr, rtl, inherit. Значение по умолчанию —inherit。

   ---

   7. Рисование изображений

   Мы также можемcanvasрисовать изображения прямо на нём.

   7.1 Создание изображения с нуля

   var img = new Image(); //Создать элемент <img> img.src = 'myImage.png'; //Установите адрес источника изображения

   После выполнения скрипта изображение начинает загружаться.

   Рисованиеimg

   // 参数 1：要绘制的 img  
   // 参数 2、3：绘制的 img 在 canvas 中的坐标
   ctx.drawImage(img,0,0); 

   Примечание: Учитывая, что изображение загружается из сети, еслиdrawImageв этот момент изображение ещё не полностью загружено, то ничего не делается, и некоторые браузеры могут выбросить исключение. Поэтому мы должны убедиться, что послеimgзавершения рисования, затемdrawImage。

   var img = new Image(); //Создайте элемент img img.onload = function(){ ctx.drawImage(img, 0, 0) } img.src = 'myImage.png'; //Установите адрес источника изображения

   7.2 РисованиеimgИзображения в элементе тега

   ​imgcannewОно также может поступать с нашей страницы<img>tag.

   <img src="./beauty.jpg" alt="" width="300"><br> <canvas id="tutorial" width="600" height="400"></canvas> function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var img = document.querySelector("img"); ctx.drawImage(img, 0, 0); } document.querySelector("img").onclick = function (){ draw(); }

   Первое изображение — это то, которое находится на странице<img>тег:

   

   7.3 Масштабирование изображений

   drawImage()Вы также можете добавить два дополнительных параметра:

   drawImage(image, x, y, width, height)

   Этот метод имеет 2 дополнительных параметра:widthиheight, эти два параметра управляют масштабом, с которым изображение должно быть нарисовано при отрисовке на холсте.

   ctx.drawImage(img, 0, 0, 400, 200)

   

   7.4 Нарезка (slice)

   drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

   Первый параметр такой же, как и остальные; это ссылка на изображение или другой холст.

   Остальные 8 параметров:

   Первые 4 определяют положение и размер области среза исходного изображения, а последние 4 определяют целевую позицию и размер отображения среза.

   

   ---

   8. Сохранение и восстановление состояния

   Saving and restoring stateявляется важной операцией при отрисовке сложной графики.

   save()иrestore()

   saveиrestoreМетод используется для сохранения и восстановленияcanvasсостояния, и он не принимает параметров.

   ​CanvasСостояние — это снимок всех стилей и преобразований, применённых к текущему холсту.

   1. О save(): состояние холста хранится в стеке. Всякий раз, когда вызывается метод save(), текущее состояние помещается в стек и сохраняется.

   Состояние рисования включает:

   • Текущие применённые преобразования (т. е. перенос, поворот и масштабирование)

   • strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

   • Текущий путь отсечения (clipping path）

     ​

     можно вызывать любое количество разsaveметод (аналогично массивам'push()).

   можно вызывать любое количество разsaveметод(аналогично массивам'push()).

   2. О restore(): Каждый раз, когда вызывается метод restore, последнее сохранённое состояние извлекается из стека, и все настройки восстанавливаются (аналогично массивам'pop()).

   var ctx; function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 150, 150); //Нарисуйте прямоугольник, используя настройки по умолчанию ctx.save(); //Сохранить состояние по умолчанию ctx.fillStyle = 'red' //Внести изменения в цвет на основе исходной конфигурации ctx.fillRect(15, 15, 120, 120); //Нарисуйте прямоугольник, используя новые настройки ctx.save(); //Сохранить текущее состояние ctx.fillStyle = '#FFF' //Снова измените конфигурацию цвета ctx.fillRect(30, 30, 90, 90); //Нарисуйте прямоугольник, используя новую конфигурацию ctx.restore(); //Восстановите предыдущее состояние цвета ctx.fillRect(45, 45, 60, 60); //Нарисуйте прямоугольник, используя предыдущую конфигурацию ctx.restore(); //Загрузите конфигурацию цвета по умолчанию ctx.fillRect(60, 60, 30, 30); //Нарисуйте прямоугольник, используя загруженную конфигурацию } draw();

   ---

   9. Преобразования

   9.1 translate

   translate(x, y)

   Используется для перемещенияcanvasначалакоординатв указанную позицию

   ​translateМетод принимает два параметра.xэто горизонтальное смещение,y— это вертикальное смещение, как показано на рисунке справа.

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

   Примечание:translateЧто перемещается —canvasначало координат холста (преобразование координат).

   

   var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.save(); //Сохранить состояние перед смещением начала координат ctx.translate(100, 100); ctx.strokeRect(0, 0, 100, 100) ctx.restore(); //Восстановить исходное состояние ctx.translate(220, 220); ctx.fillRect(0, 0, 100, 100) } draw();

   

   9.2 rotate

   rotate(angle)

   ​

   Поворачивает оси координат.

   ​

   Этот метод принимает только один параметр: угол поворота, который отсчитывается по часовой стрелке, в радианах.

   Центр вращения — начало координат.

   

   var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.save(); ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 100, 100); ctx.restore(); ctx.save(); ctx.translate(0, 0); ctx.fillRect(0, 0, 50, 50) ctx.restore(); } draw();

   

   9.3 scale

   scale(x, y)

   Мы используем его, чтобы увеличить или уменьшить количество пикселей фигуры наcanvasхолсте, чтобы масштабировать фигуры и растровые изображения вниз или вверх.

   scaleМетод принимает два параметра.x,yЭто коэффициенты масштабирования для горизонтальной оси и вертикальной оси соответственно, и оба должны быть положительными значениями. Значение меньше 1.0 означает уменьшение, больше 1.0 — увеличение, а значение 1.0 не даёт эффекта.

   По умолчанию,canvas1 единица на холсте — это 1 пиксель. Например, если мы зададим коэффициент масштабирования 0.5, 1 единица становится 0.5 пикселя, поэтому нарисованная фигура будет вдвое меньше исходной. Аналогично, при значении 2.0 1 единица становится 2 пикселями, и результатом рисования будет фигура, увеличенная в 2 раза.

   9.4 transform (матрица преобразования)

   transform(a, b, c, d, e, f)

   

   • a (m11): Горизонтальное масштабирование.
   • b (m12): Горизонтальный сдвиг.
   • c (m21): Вертикальный сдвиг.
   • d (m22): Вертикальное масштабирование.
   • e (dx): Горизонтальное перемещение.
   • f (dy): Вертикальное перемещение.
   var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.transform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); } draw();

   

   ---

   10. Композитинг

   ​

   Во всех предыдущих примерах мы всегда рисуем одну фигуру поверх другой. Для многих других случаев этого далеко не достаточно. Например, для композитной графики порядок отрисовки может быть ограничен. Однако мы можем использовать свойство globalCompositeOperation, чтобы изменить эту ситуацию.

   globalCompositeOperation = type

   var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 200, 200); ctx.globalCompositeOperation = "source-over"; //Глобальные операции композиции ctx.fillStyle = "red"; ctx.fillRect(100, 100, 200, 200); } draw();

   Примечание: В следующей демонстрации синий — исходный, а красный — новый.

   type — одно из следующих 13 строковых значений:

   1. Это настройка по умолчанию; новое изображение перекроет исходное изображение.

   

   2. source-in

   Отображается только перекрывающаяся часть нового изображения и исходного изображения; все остальные области становятся прозрачными. (Включая другие области старого изображения, они также станут прозрачными)

   

   3. source-out

   Показывает только те части, где новое изображение и старое изображение не перекрываются; всё остальное полностью прозрачно. (Старое изображение также не отображается)

   

   4. source-atop

   Новое изображение показывает только область перекрытия со старым изображением. Старое изображение по-прежнему может отображаться.

   

   5. destination-over

   Новое изображение будет ниже старого изображения.

   

   6. destination-in

   Отображается только старое изображение в области перекрытия нового и старого изображений; все остальные области прозрачны.

   

   7. destination-out

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

   

   8. destination-atop

   Старое изображение отображает только перекрывающуюся часть, а новое изображение будет отображаться ниже старого изображения.

   

   9. lighter

   Отображаются и новое, и старое изображения, но цвета в области перекрытия обрабатываются аддитивно.

   

   10. darken

   Сохраняет самые тёмные пиксели в перекрывающейся части. (Сравнивается каждый цветовой канал, берётся наименьший)

   blue: #0000FF
   red: #FF0000

   Итак, цвет перекрывающейся части:#000000。

   

   11. lighten

   Обеспечивает самые яркие пиксели в перекрывающейся части. (Сравнивается каждый цветовой канал, берётся наибольший)

   blue: #0000FF
   red: #FF0000

   Итак, цвет перекрывающейся части:#ff00ff。

   

   12. xor

   Перекрывающаяся часть становится прозрачной.

   

   13. copy

   Сохраняется только новое изображение; всё остальное очищается (становится прозрачным).

   

   ---

   11. Контуры обрезки

   clip()

   ​

   Преобразовать уже созданный контур в контур обрезки.

   ​

   Функция контура обрезки — маска. Отображается только область внутри контура обрезки; область за пределами контура обрезки скрыта.

   ​

   Примечание:clip() может маскировать только изображения, нарисованные после вызова этого метода. Если изображение было нарисовано до вызова метода clip(), маскирование невозможно.

   

   var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(20,20, 100, 0, Math.PI * 2); ctx.clip(); ctx.fillStyle = "pink"; ctx.fillRect(20, 20, 100,100); } draw();

   ---

   12. Анимация

   Основные шаги анимации

   1. ПонятноcanvasПеред отрисовкой каждого кадра анимации нужно очистить всё. Самый простой способ очистить всё —clearRect()метод.

   2. SavecanvasstateЕсли в процессе рисования вы будете изменятьcanvasсостояние canvas (цвет, смещённое начало координат и т. д.), и если каждый кадр должен начинаться с исходного состояния, лучше всего сохранитьcanvasсостояние.

   3. Нарисуйте графику анимацииЭтот шаг — фактическая отрисовка кадра анимации

   4. ВосстановитьcanvasstateЕсли вы сохранилиcanvasstate ранее, его следует восстановить после отрисовки одного кадра.canvasсостояние.

   Управление анимацией

   Мы можем использоватьcanvasметоды или пользовательские методы для рисования изображения наcanvasхолст. Обычно мы видим результат рисования только после завершения выполнения скрипта. Например, мы не можем завершить анимацию внутриforцикла.

   То есть, чтобы выполнить анимацию, нам нужны некоторые методы, которые могут выполнять перерисовку в запланированное время.

   Обычно используются следующие три метода:

   1. setInterval()
   2. setTimeout()
   3. requestAnimationFrame()

   Случай 1: Солнечная система

   let sun; let earth; let moon; let ctx; function init(){ sun = new Image(); earth = new Image(); moon = new Image(); sun.src = "sun.png"; earth.src = "earth.png"; moon.src = "moon.png"; let canvas = document.querySelector("#solar"); ctx = canvas.getContext("2d"); sun.onload = function (){ draw() } } init(); function draw(){ ctx.clearRect(0, 0, 300, 300); //Очистить всё содержимое /*Нарисовать Солнце*/ ctx.drawImage(sun, 0, 0, 300, 300); ctx.save(); ctx.translate(150, 150); //Нарисовать орбиту Земли ctx.beginPath(); ctx.strokeStyle = "rgba(255,255,0,0.5)"; ctx.arc(0, 0, 100, 0, 2 * Math.PI) ctx.stroke() let time = new Date(); //Нарисовать Землю ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds()) ctx.translate(100, 0); ctx.drawImage(earth, -12, -12) //Нарисовать орбиту Луны ctx.beginPath(); ctx.strokeStyle = "rgba(255,255,255,.3)"; ctx.arc(0, 0, 40, 0, 2 * Math.PI); ctx.stroke(); //Нарисовать Луну ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds()); ctx.translate(40, 0); ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); requestAnimationFrame(draw); }

   

   Вариант 2: Аналоговые часы

   init(); function init(){ let canvas = document.querySelector("#solar"); let ctx = canvas.getContext("2d"); draw(ctx); } function draw(ctx){ requestAnimationFrame(function step(){ drawDial(ctx); //Нарисуйте циферблат drawAllHands(ctx); //Нарисуйте часовую, минутную и секундную стрелки requestAnimationFrame(step); }); } /*Нарисуйте часовую, минутную и секундную стрелки*/ function drawAllHands(ctx){ let time = new Date(); let s = time.getSeconds(); let m = time.getMinutes(); let h = time.getHours(); let pi = Math.PI; let secondAngle = pi / 180 * 6 * s; //Вычислите радианы секундной стрелки let minuteAngle = pi / 180 * 6 * m + secondAngle / 60; //Вычислите радианы минутной стрелки let hourAngle = pi / 180 * 30 * h + minuteAngle / 12; //Вычислите радианы часовой стрелки drawHand(hourAngle, 60, 6, "red", ctx); //Нарисуйте часовую стрелку drawHand(minuteAngle, 106, 4, "green", ctx); //Нарисуйте минутную стрелку drawHand(secondAngle, 129, 2, "blue", ctx); //Нарисуйте секундную стрелку } /*Нарисуйте часовую, минутную или секундную стрелку * Параметр 1: угол рисуемой стрелки * Параметр 2: длина рисуемой стрелки * Параметр 3: ширина рисуемой стрелки * Параметр 4: цвет рисуемой стрелки * Параметр 4: ctx **/ function drawHand(angle, len, width, color, ctx){ ctx.save(); ctx.translate(150, 150); //Переместите начало координатных осей в исходный центр ctx.rotate(-Math.PI / 2 + angle); //Повернуть оси координат. Ось x — это угол стрелки. ctx.beginPath(); ctx.moveTo(-4, 0); ctx.lineTo(len, 0); //Нарисовать стрелку вдоль оси x ctx.lineWidth = width; ctx.strokeStyle = color; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); ctx.restore(); } /*Нарисовать циферблат*/ function drawDial(ctx){ let pi = Math.PI; ctx.clearRect(0, 0, 300, 300); //Очистить всё содержимое ctx.save(); ctx.translate(150, 150); //Переместить начало координат в исходный центр ctx.beginPath(); ctx.arc(0, 0, 148, 0, 2 * pi); //Нарисовать круг ctx.stroke(); ctx.closePath(); for (let i = 0; i < 60; i++){//Нарисуйте отметки. ctx.save(); ctx.rotate(-pi / 2 + i * pi / 30); //Поверните оси координат. Положительное направление оси x начинается с направления вверх. ctx.beginPath(); ctx.moveTo(110, 0); ctx.lineTo(140, 0); ctx.lineWidth = i % 5 ? 2 : 4; ctx.strokeStyle = i % 5 ? "blue" : "red"; ctx.stroke(); ctx.closePath(); ctx.restore(); } ctx.восстановить(); }

   
   Попробуйте »

   

   Автор оригинала: 做人要厚道2013

   Оригинальный URL: https://blog.csdn.net/u012468376/article/details/73350998