Рубрики
Без рубрики

Полный обзор HTML Canvas

Shukant Pal Дополнительный обзор HTML Canvasa должен прочитать, прежде чем делать что-нибудь с тегом HONVAS, даже если вы уже знаете его .photo by Armand Khourey на UnsplashoverviewTheThte HTML Canvas Element используется для рисования графики «Растровый» в веб-приложении. API Canvas предоставляет два контекста рисунков:

Автор оригинала: FreeCodeCamp Community Member.

Shukant Pal.

А нужно прочитать, прежде чем делать что-нибудь с тегом Canvas, даже если вы уже это знаете.

Элемент HTML Canvas используется для рисования графики «Растровый» в веб-приложении. POLVAS API обеспечивает два контекста рисунков: 2D и 3D, а в этом руководстве мы собираемся поговорить о 2D-одной (который я буду ссылаться на него в API Canvas для простоты).

Прежде чем начать, я хочу, чтобы вы узнали один очень важный момент. Canvas – это растровый графический API – вы управляете вещами на уровне пикселей. Это означает, что базовое программное обеспечение не знает, что модель, которую вы используете для отображения вашего контекста – это не знает, если вы рисуете прямоугольник или круг.

Я разделил API Canvas в отдельные куски, чтобы вы могли поглотить один за другим:

  • Путь API.
  • Стили рисования
  • Градиенты и узоры
  • Прямые пиксельные манипулирования и изображения
  • Преобразования
  • Хит регионы
  • Состояние и клип () Метод

Чтобы выстрелить учебник вашего холста, создайте HTML-файл и файл JS, связанный с ним.




    Canvas Demo
    
        
             This will be displayed if your browser doesn't
             support the canvas element. The closing tag is
             necessary.

В вашем Canvas-demo.js файл,

// canvas-demo.js

const demoCanvas = document.getElementById('canvas-demo').getContext('2d');

window.onload = function() {// make sure to use onload
    
/* Add code here as we go!!! @nodocs
 */
    
}

Пути – это коллекция точек в 2D-пиксельной сетке в холсте. Они рисуются с помощью этой API. Каждая форма в пути, которую вы рисуете, называется «подпунктом» документацией W3C.

  • rightpath () и ClosePath () Все формы, которые вы рисуете, добавляются в текущий путь. Если вы звоните инсульт или заполнить Позже он будет применять это ко всем формам, которые вы нарисованы в текущем пути. Чтобы предотвратить это, вы разделите свой рисунок, позвонив rightpath и ClosePath Отказ
// Calling this isn't necessary, but a good practice.
demoCanvas.beginPath();

/*
 * Drawing code, copy and paste each example (separately) here
 */

demoCanvas.closePath();// this is required if you want to draw
// in a separate path later
  • moveto (x, y) : The означает конструкцию новой формы, которая начинается в точке (X, Y).
  • Lineto (X, Y) : Рисует линию от последней точки в текущей форме до пропущенной точки. Если не создано никакой формы (через MOVETO ), то создается новый, начиная с (x, y) (просто как moveto ).
  • Квадратичное (CPX1, CPY1, X, Y) и Beziercurveto (CPX1, CPY1, CPX2, CPY2, X, Y) : Рисует квадратичную/кубическую кривую Безье, начиная с последней точки в форме, проходя через контрольные точки ( CPX1, CPY1 и CPX2, CPY2 ) и заканчивая на х, у Отказ Кривая Безье – это просто «гладкая» кривая, которая проходит через промежуточные «контрольные» точки с заданными точками окончания. Обратите внимание, что кривая не приходится точно Passe через контрольные точки – его можно сгладить.
  • Arcto (x1, y1, x2, y2, радиус) : Это немного сложный метод для использования. Предположим, текущая точка на пути – x0, y0 – Тогда АРКТО Нарисуйте дугу, которая имеет два касания, соединяющих эти две пары точек (x1, y1) & (x0, y0) и (x1, y1) & (x2, y2) Отказ Радиус дуги будет дан тем. Чем больше радиус, дальше дуги будет из x1, y1 (См. Пример 1.2 для визуальной ясности). Если вы не использовали мовето Тем не менее, тогда x0, y0 по умолчанию будет 0,0 Отказ
  • ARC (X, Y, RADIUS, STARTANLY, ENGALLAGE, против часовой стрелки) : The соединяет текущую точку на пути (по умолчанию 0,0 ) к началу дуги. Это рисует дугу из центра х, у радиуса Радиус , от Startangle к Энтербий Отказ (Примечание: в отличие от ручки и бумаги математики, углы описаны в направлении по часовой стрелке в API Canvas); Но в четырех особых условиях – (x0, y0) равен (x1, y1) , (x1, y1) равен (x2, y2) , (x0, y0), (x1, y1), (x2, y2) коллинеар, или если Радиус равен нулю, то вызов дуга будет эквивалентно Lineto (X1, Y1) и строка будет нарисована вместо этого.
  • rect (x, y, w, h) : Рисует прямоугольник с верхним левым углом х, у и ширина W и высота H Отказ

Пример 1.1:

Теперь нам нужно попробовать демонстрацию – мы собираемся нарисовать несколько случайных горизонтальных линий, а затем эскиз глаза. Результат будет выглядеть как что-то слева. Не забудьте пройти через код и Tinker с кодом.

/* Draw horizontal subpaths (shapes) in one path. */

// Draw a pattern of vertically stack horizontal
// lines.
demoCanvas.moveTo(10, 10);// start at (10,10)
demoCanvas.lineTo(110, 10);
demoCanvas.moveTo(10, 20);// 10 pts below
demoCanvas.lineTo(180, 20);
demoCanvas.moveTo(10, 30);
demoCanvas.lineTo(150, 30);
demoCanvas.moveTo(10, 40);
demoCanvas.lineTo(160, 40);
demoCanvas.moveTo(10, 50);
demoCanvas.lineTo(130, 50);

// try removing this moveTo, the quad-curve will then
// start from from (130, 50), due to the lineTo.
demoCanvas.moveTo(10, 100);// quad-curve starts from here
demoCanvas.quadraticCurveTo(110, 55, 210, 100);// curve upward
demoCanvas.moveTo(10, 100);// back here, let's draw one below
demoCanvas.quadraticCurveTo(110, 145, 210, 100);// curve below
// that forms the eye outline

demoCanvas.moveTo(132.5, 100);// remove this, a horizontal line will be
// drawn from (210, 100) to (132.5, 100) because arc() connects the last
// point to the start of the arc.

demoCanvas.arc(110, 100, 22.5, 0, 2*Math.PI, false);// pupil (circle)

/* We'll talk about this shortly */
demoCanvas.stroke();// draws (by outlining our shapes in the path)

Пример 1.2:

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

(x1, y1) для АРКТО Является ли угловой, образованный двумя касающимися касательными.

// comment this block out if you can see the cubic curve
demoCanvas.moveTo(100, 100);
demoCanvas.lineTo(150, 10);
demoCanvas.moveTo(250, 100);
demoCanvas.lineTo(200, 190);
demoCanvas.moveTo(150, 10);
demoCanvas.lineTo(200, 190)

demoCanvas.moveTo(100, 100);
demoCanvas.bezierCurveTo(150, 10, 200, 190, 250, 100);

// arcTo() is too complicated to use
// demoCanvas.stroke(); demoCanvas.closePath(); demoCanvas.beginPath();
demoCanvas.moveTo(200, 200);// comment out above line (and comment this line),
// then the arc's tangent will come from (0,0)!! Try it.

demoCanvas.arcTo(100, 300, 300, 300, 100);
demoCanvas.moveTo(200, 200);
demoCanvas.arcTo(100, 300, 300, 300, 50);

demoCanvas.moveTo(100, 300);
demoCanvas.lineTo(300, 300);
demoCanvas.moveTo(100, 300);
demoCanvas.lineTo(200, 200);

demoCanvas.moveTo(50, 300);
// packman
demoCanvas.arc(50, 300, 35, Math.PI/6, 11*Math.PI/6, false);
demoCanvas.lineTo(50, 300);

demoCanvas.stroke();

До сих пор мы рисуем простые тонкоровневые пути. Стили рисования помогут нам сделать наш рисунок намного лучше.

Обратите внимание, что вы не можете применить два разных стиля на том же пути. Например, если вы хотите нарисовать красную линию и синюю линию – вам придется создать новый путь, чтобы нарисовать синий. Если вы не создаете новый путь, то при звонке инсульт Второе время после настройки вашего цвета отображения цвета в синий цвет обе линии будут окрашены синие. Следовательно, стили применяются ко всем подпуманию, независимо от того, были ли они уже поглаживались.

Несколько свойств 2D-контекста объекта Democanvas определены для этой цели:

  • Сландвидность Толщина рисунков рисунков. По умолчанию это 1; Следовательно, два приведенные выше примеры использовали толстый контур 1 пикселя.
  • Linecap : Это крышка, нанесенная на концах подпунтов (форм). Это строка и может иметь три допустимых значения: «приклад», «круглый», «квадрат» (см. Пример 1.3 для визуальной ясности). «Прицветает» закончится линии без шапки – приводя к жесткому, ортогональным концам, как тонкие прямоугольники. «Раунд» добавляет полукруг к концу, чтобы дать гладкие концы. «Квадрат» добавляет квадрат до конца, но выглядит как «прикладом». «Круглый» и «квадратный» добавляют немного длины до каждую подпункту.
  • Линейше : Это решает, как присоединены две перекрывающиеся линии. Например, если вы хотите создать правую стрелку (>), то вы можете изменить, как сформирован угол с этим свойством. Это имеет три допустимых значения: «раунд», «скос» и «MITER». Проверьте пример 1.4 для того, как они меняют углы. (Значение по умолчанию – «MITER»). «Round» сформирует круговые углы, а «скос» создаст жесткие трехсторонние углы, а «Miter» сформирует острый край.
  • Miterlimit : Когда linejoin = "Mister" Это решает максимальное расстояние B/W внутренний и внешний угол линии. См. Пример 1.4 (B) для визуальной ясности. Если предел MITER слишком высок, то острые стрелки могут иметь большую общую площадь B/W двух линий. Если MITER-LIMES пропускается, то дисплей обратно в конику соединения.

Пример 1.3 и 1.4:

В примере 1.3 слева вы можете посмотреть, как круглая и квадратная линия линии длиннее покрытия по умолчанию. (Примечание: толстая линия, тем больше увеличение длиной)

В примере 1.4 (а) вы можете увидеть, как работают круглые и сковы. Созданные линии идентичны в верхней и нижней части. Только Линейше Свойства разные.

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

Определены дополнительные свойства стиля отображения:

  • шрифт : Эта строка определяет, как вы хотите стиль текста. Например, democanvas.font = "10px Times New Roman" является действительным значением шрифта.
  • TextAlign : Допустимые значения – «начните», «конец», «левый», «правый» и «центр». По умолчанию «Пуск».
  • TextBaseline : Допустимые значения – «топ», «висит», «середина», «алфавит», «идеографии», «дно». По умолчанию «алфавит».

В примерах до сих пор вы могли бы заметить, что я использовал democanvas.stroke () перед закрытием каждого пути. Метод инсульта делает этот фактический рисунок частично в этих примерах.

  • инсульт : Этот метод рисует контук вокруг каждой подпункты (формы) в соответствии с Сландвидность и связанные с ними свойства.
  • заполнить : Этот метод заполняет интерьер формы, прослеживаемой путем. Если путь не закрыт, то он автоматически закроет его, подключив последнюю точку на первую точку.
demoCanvas.moveTo(10,10);
demoCanvas.lineTo(50, 50);
demoCanvas.lineTo(10, 50);
demoCanvas.fill();

Приведенный выше код не закрывает треугольник (10,10), (50,50), (10,50), но вызывает заполнить () заполняет его как ожидалось.

  • Clearrect (x, y, w, h) : Очищает пиксели в прямоугольнике, образованном с заданными параметрами.
  • Strokerct (x, y, w, h) : Эквивалентно позвонить rect а потом инсульт Отказ Он не добавляет прямоугольник на текущий путь – следовательно, вы можете изменить стиль позже и позвонить инсульт не влияя на прямоугольник с образованием.
  • FillRect (x, y, w, h) : Эквивалентно позвонить rect а потом заполнить Отказ Это также не добавляет прямоугольник на текущий путь.
  • Структивный текст (текст, X, Y, MaxWidth) и FillText (Text, X, Y, MaxWidth) : Пишет текст на (x, y) в соответствии с Струкстестил / FillStyle имущество. Maxwidth Необязательно и определяет максимальную длину в пикселях, которые вы хотите, чтобы текст занимал. Если текст длиннее, то он масштабируется до меньшего шрифта. Измеренный текст («текст»). Ширина Может использоваться для поиска ширины дисплея кусочка текста, основанного на текущем шрифт Отказ

Примечание: FillStyle и Струкстестил являются свойствами, которые можно установить на любую цветовую строку CSS, чтобы установить цвета наполнения и интуиции.

Из коробки 2D контекст предоставляет линейные и радиальные градиенты. CreateLineargradient и CreateRadialGradient Методы возвращаются Холвасградиент объекты, которые затем могут быть изменены то, что мы хотим.

  • CreateLineargradient (x0, y0, x1, y1) : Создает линейный градиент, который работает на линии x0, y0 к x1, y1 Отказ
  • CreateRadialGradient (x0, y0, r0, x1, y1, r1) : Создает радиальный градиент, который проходит в конусе (кругах) с верхним (внутренним кругом) радиуса R0 и дно (внешний круг) радиуса R1 Отказ Первый цвет будет иметь радиус R0 Отказ

Холвасградиент имеет один метод: AddColorstop (смещение, цвет) Отказ Градиент начинается с 0 и заканчивается на 1. Цвет в положении Смещение будет установлен с использованием этого метода. Например, AddColorstop (.5, "зеленый") сделает средний цвет зеленым. Цвета B/W два соседних остановка будут интерполированы (смешаны).

Пример 1.6:

В примере слева вы можете увидеть, как работают линейные и радиальные градиенты.

var linearGrad = demoCanvas.createLinearGradient(5,5,100,5);
linearGrad.addColorStop(0, "blue");
linearGrad.addColorStop(.5, "green");
linearGrad.addColorStop(1, "red");
demoCanvas.strokeStyle=linearGrad;
demoCanvas.lineWidth=50;
demoCanvas.moveTo(5,5);
demoCanvas.lineTo(100,5);
demoCanvas.stroke();// change strokeStyle(l10) to fillStyle(l10)
// and stroke() to fill(). Then, change lineTo(100,5) to rect(5,5,95,50).
// Results should be almost same.

demoCanvas.closePath();
demoCanvas.beginPath();
var radialGrad = demoCanvas.createRadialGradient(50,50,10,50,50,40);
radialGrad.addColorStop(0, "blue");
radialGrad.addColorStop(.5, "green");
radialGrad.addColorStop(1, "red");
demoCanvas.fillStyle=radialGrad;
demoCanvas.arc(50,50,30,0,2*Math.PI,false);
demoCanvas.fill();

Вы можете удивиться, что если x0, y0 и x1, y1 Данные линейным/радиальным градиентом не равны линии/дуги, которую мы создаем? См. Пример 1.7

Пример 1.7

var linearGrad = demoCanvas.createLinearGradient(5,5,100,5);
linearGrad.addColorStop(0, "blue");
linearGrad.addColorStop(.5, "green");
linearGrad.addColorStop(1, "red");
demoCanvas.strokeStyle=linearGrad;
demoCanvas.lineWidth=50;
demoCanvas.moveTo(50,5);
demoCanvas.lineTo(155,5);
demoCanvas.stroke();// change strokeStyle(l10) to fillStyle(l10)
// and stroke() to fill(). Then, change lineTo(100,5) to rect(5,5,95,50).
// Results should be almost same.

demoCanvas.closePath();
demoCanvas.beginPath();
var radialGrad = demoCanvas.createRadialGradient(50,50,10,50,50,40);
radialGrad.addColorStop(0, "blue");
radialGrad.addColorStop(.5, "green");
radialGrad.addColorStop(1, "red");
demoCanvas.fillStyle=radialGrad;
demoCanvas.arc(60,60,30,0,2*Math.PI,false);
demoCanvas.fill();

Imagedata Объект можно использовать для манипулирования отдельными пикселями. У него есть три свойства:

  • ширина : Ширина данных изображения в пикселях дисплея устройств.
  • Высота : Высота данных изображения на пикселях дисплея устройств.
  • данные : Это Uint8ClampedArray (MDN DOC здесь ), который содержит отдельные данные пикселей в серии (R, g, b, a) байтов для верхнего пикселя в нижний правый пиксель. Итак, N Красная стоимость Pixel будет в Данные [Y * Width + X] Грин будет в данные [Y * ширина + х + 1] синий будет в данные [Y * ширина + х + 2] и альфа будет в данные [Y * ширина + х + 3] Отказ

Примечание. Значение RGBA можно использовать для представления цвета – где R, G, B – количество красных, зеленых и синих, а a – непрозрачность (альфа-значение). В холсте эти элементы могут иметь любое целочисленное значение в [0, 255].

Вы можете получить Imagedata Объект со следующими методами в API Canvas:

  • CreateiMagedata (SW, SH) : Это создает Imagedata Объект ширины и высоты SW и Sh , определенный в CSS пикселей. Все пиксели будут инициализированы для прозрачного черного (Hex, а также).
  • createiMagedata (данные) : Копирует данные изображения и возвращает копию.
  • Getimagedata (SX, SY, SW, SH) : Возвращает копию пикселей холста в прямоугольнике, образованном SX, SY, SW, SH в оформлении Imagedata объект. Пиксели за пределами холста установлены на прозрачный черный. putimagedata (imagedata, dx, dy, dyingx, грязный, грязный, грязный)
  • : (Последние четыре «грязные» аргументы являются необязательными). Копирует значения пикселей в imagedata в прямоугольник холста в DX, DY Отказ Если вы предоставляете последние четыре аргумента, он будет скопировать только грязные пиксели в данных изображения (прямоугольник, сформированные в Graphicx, Granky размеров DirtyWidth * DirtyHeight ). Не прохождение последних четырех аргументов такое же, как зов Putimagedata (imagedata, dx, dy, 0,0, imagedata.width, imagedata.height) Отказ

Пример 1.8:

Я заполнил все 400×400 холст со случайными цветами (полностью непрозрачно), используя getimagedata/putimagedata методы.

Обратите внимание, что используя PUINTPATH/GOATHPATH Не нужно использовать API imagedata – потому что вы не используете API Canvas для формирования форм/кривых.

/* replace this line with demoCanvas.createImageData(390,390) instead. */
var rectData = demoCanvas.getImageData(10, 10, 390, 390);

for (var y=0; y<390; y++) {
  for (var x=0; x<390; x++) {
    const offset = 4*(y*390+x);// 4* because each pixel is 4 bytes
    rectData.data[offset] = Math.floor(Math.random() * 256);// red
    rectData.data[offset+1] = Math.floor(Math.random() * 256);// green
    rectData.data[offset+2] = Math.floor(Math.random() * 256);// blue
    rectData.data[offset+3] = 255;// alpha, fully opaque
  }
}

demoCanvas.putImageData(rectData, 10, 10);

/* beginPath/closePath aren't required for this code */

Изображения можно нарисовать на холсте напрямую. Дримаж Может использоваться в трех разных способах сделать это. Это требует Холвасимагиорс как пиксельный источник.

  • HORDIMAGE (изображение, DX, DY) : Копирует источник изображения в холст на ( dx, dy ). Все изображение копируется.
  • DrawImage (изображение, DX, DY, DW, DH) : Копирует источник изображения в прямоугольник в холсте на ( dx, dy ) размера ( dw, dh ). При необходимости он будет масштабироваться или масштабируется.
  • DOWNIMAGE (изображение, SX, SY, SW, SH, DX, DY, DW, DH) : Копирует прямоугольник в источнике изображения SX, SY, SW, SH в прямоугольник в холсте DX, DY, DW, DH и масштабируется вверх или вниз, если требуется. Однако, если прямоугольник SX, SY, SW, SH Имеет детали вне фактического источника – тогда исходный прямоугольник вырезается, чтобы включить входящие детали, а прямоугольник назначения вырезается в той же пропорции; Тем не менее, вы не должны проходить несколько прямоугольников без ограничения – сохраняйте его простым, глупым.

Пример 1.9:

var image = document.getElementById('game-img');
demoCanvas.drawImage(image, 50, 50, 200, 200, 100, 100, 200, 200);

/* beginPath/closePath aren't required for this code */

Примечание: добавьте это в свой HTML –

Теперь мы добираемся до захватывающих частей Canvas API !!!

Холст использует Трансформация матрица Чтобы преобразовать входные ( x, y ) координаты на отображаемые ( x, y ) координаты. Обратите внимание, что пиксели, нарисованные до преобразования, не преобразуются – они нетронутыми. Только нарисованные после применения преобразования будут изменены.

Существует три встроенных метода преобразования:

  • масштаб (XF, YF) : Этот метод масштабирует вход по XF в горизонтальном направлении и YF в вертикальном направлении. Если вы хотите увеличить изображение по фактору м Затем пройти xf = yf = m Отказ Растянуть/сжать изображение горизонтально по м , xf = m, yf = 1 Отказ Растянуть/сжать изображение вертикально на м , xf = 1, yf = m Отказ
  • Повернуть (угол) : Вращает вход под углом Угол В по часовой стрелке в радианах.
  • Перевести (DX, DY) : Сдвигает вход по DX, DY Отказ

Пример 2.0:

var image = document.getElementById('game-img');
demoCanvas.drawImage(image, 0, 0, 400, 400);
demoCanvas.rotate(Math.PI / 6);
demoCanvas.scale(2, 2);
demoCanvas.translate(10, 10);
demoCanvas.drawImage(image, 0, 0, 400, 400);

Чтобы вернуть все преобразования:

demoCanvas.setTransform(1, 0, 0, 0, 0, 1);
// sets the transform to the identity matrix

ПРИМЕЧАНИЕ:

  • Изменение порядка преобразования может повлиять на конечный результат.
  • Для продвинутых пользователей вы можете посмотреть на трансформировать и Сеттрансформ методы. Это позволит вам напрямую установить матрицу трансформации 3D.
  • Getimagedata и Putimagedata не влияют преобразование. Это означает, что если вы нарисуете черный прямоугольник, используя Putimagedata , он не будет трансформирован (вращается/масштабируется/переведен).
  • Как изменение трансформации работает только для рисунков, выполненных после нанесения его, вы не можете масштабировать/вращать/переводить существующий холст напрямую (и не Getimagedata а затем Putimagedata работа). Возможно, вам придется создать еще один скрытый холст одного размера – а затем скопировать данные-данные в 2-й холст, затем используйте Дримаж на 2 холст.
  • Проверьте этот пример: https://canvasdemo2d.github.io/ (Источник: https://github.com/canvasdemo2d/canvasdemo2d.github.io ). Переместите курсор через холст и посмотрите, что он делает. Это не будет работать на мобильных телефонах, к сожалению. Каскадный эффект обусловлен тем, что я переводю Canvas W.r.t Мышь, используя Дримаж Отказ Дримаж Затем пишет к тому же холсту, который он читает, что вызывает повторяющийся узор!

На момент написания письма (март 2019 года), Поддержка хит-регионов – экспериментальная в хроме и на Firefox. Мобильный браузер даже не поддерживает его вообще. Следовательно, я объясню вам «то, что» могло использовать регионы.

Хит регионы используются для укладки событий указателя на холсте и знать «где» пользователь нажал. Например, у вас могут быть два прямоугольника A & B – когда пользователь нажимает A, вы хотите выполнить действие $ a A и, когда пользователь нажимает B, вы хотите выполнить действие $ B. Давайте пройдем через весь процесс!

Хит-регион связан с этими тремя вещами:

  • Путь: Текущий путь, когда был создан хит региона (например, прямоугольник). Все события указателя внутри пути направляются на этот хит регион.
  • ID: Уникальная идентификационная строка для идентификации области попадания обработчиком событий.
  • Контроль: Альтернативный элемент DOM (например, htmlButtonelection ), вместо этого получают события указателя.

Примечание. Путь автоматически предоставляется Canvas при добавлении нового хит-региона. Только один – ID или управление – необходимо для формирования хит-региона.

Методы манипулирования списком HiT-Region Canvas:

  • addhitregion (варианты) : Берет HITREGIONOPTIONS Объект и образует хит-регион, заключенный по текущему пути. Варианты Аргумент должен быть строкой ID недвижимость или Htmlelement Контроль имущество.
  • Reviewhitregion (ID) : Удаляет область попадания с идентификатором ID так что он больше не получает никаких указателей.
  • Clearhitregions () : Удаляет все области попадания.
demoCanvas.fillStyle = 'red';
demoCanvas.rect(10,10,60,60);
demoCanvas.fill();// first rectangle
demoCanvas.addHitRegion({ id: 'btn1' });

demoCanvas.fillStyle = 'blue';
demoCanvas.rect(10,110,60,60);
demoCanvas.fill();
demoCanvas.addHitRegion({ id: 'btn2' });

document.getElementById('demo-canvas').onpointerdown = function(evt) {
// demoCanvas is the 2d context, not the HTMLCanvasElement
    
  console.log('Hello id: ' + evt.region);// region is hitregion id
}

// This code might not work due to this being an
// unsupported (new) feature of HTML5.

ПРИМЕЧАНИЕ. Хит регионы не поддерживаются – но это не значит, что вы должны использовать их для захвата событий указателя. Вы можете создать свой «Собственный список HiT-Region» и представления границ регионов (потому что вы не можете получить текущий путь от холста, слишком плохого). В Документ. GTELEMENTYBYID («Демо-холст»). OnPointerDown Метод, получите текущий ClientX, Clientsy Свойства и поиск в списке ударов. Основываясь на хит-регионе, который содержит точку, вы можете выполнить предполагаемое действие.

Государственная экономия – это удобство, предоставляемое спецификацией W3C. Вы можете сохранить текущее состояние холста и восстановить его позже.

Вы также можете создать такую систему (частично), написав собственную модель JavaScript. Но вам придется сохранить достаточно веществ: матрица преобразования, список ударов, стиль свойств и так далее. Кроме того, вы не можете вернуть отсечение (мы доберемся до клип в течение некоторого времени).

Примечание: Сохранить / Восстановить Методы не сохраняют и восстановить фактические рисования/пиксели. Они сохраняют только другие свойства.

Следовательно, я бы очень рекомендую использовать Сохранить & Восстановить Методы идти вперед и назад, а не стирать вещи самостоятельно или сделать свой собственный информационный механизм.

Canvasrendering2DContext Объект имеет связанный государственный стек. Сохранить Метод будет толкать текущее состояние холста на этот стек, а Восстановить Метод будет выпустить последнее состояние из стека.

Регион обтрака

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

Так, например, скажем, вы знаете, как нарисовать звезду в холсте. Это касается всех сторон холста. Но теперь вы хотите отображать только нижнюю половину звезды. В этом сценарии вы бы:

  1. Сохранить состояние холста
  2. Зажим нижний половинный регион
  3. Нарисуйте свою звезду (как будто на весь холст)
  4. Восстановить состояние холста

Чтобы записать регион, вы должны позвонить в клип () Метод, который делает следующее:

demoCanvas.save();
demoCanvas.rect(0, 200, 400, 200);// lower-half rectangle subpath
demoCanvas.clip();
/* star drawing method */
demoCanvas.restore();

Это все сейчас. Я напишу статью о анимации с холстом и как полностью написать пользовательский интерфейс на холсте.

Дальнейшее чтение:

  • Как использовать Firebase для строительства многопользовательских игр Android
  • Как синхронизировать свое игровое приложение на нескольких устройствах Android
  • Круговые зависимости в JavaScript

Шукант Пал – это создатель ядра Silcos. Он является заявлением учеником и теперь практикует расширенное развитие веб-приложений. Он имеет практический опыт работы с реагированием и его экосистемой.

Все цитаты взяты из документов W3C для контекста 2D Canvas.

Эй, я шукант Пал. Я разрабатываю много веб-приложений в свободное время. Следуй за мной на Социальные медиа Отказ

Читайте ещё по теме: