Объяснение, как работает HTML5 canvas transform
У метода canvas шесть аргументов, которые образуют три пары. Вы можете задавать свои значения и смотреть, как они влияют на систему координат, а можете ознакомиться с предустановленными.
Чем хорош метод canvas.transform
Трансформ хорош по нескольким причинам.
Во-первых, если понимать, как он работает, то он обеспечивает самую компактную запись преобразований.
Во-вторых, он сразу задаёт все аспекты трансформаций: и масштабирование, и отражение, и повороты, и другие аффинные искажения. Это не только компактно, но и избавляет от чувствительности к порядку операций преобразования координат.
В-третьих, он даёт доступ к преобразованиям, которые недоступны через другие другие методы ( rotate , translate и scale ).
В-четвёртых, он позволяет, как задавать абсолютные значения параметров преобразований координат (метод setTransform ), так и относительные, относительно текущих. Это может быть полезным, когда имеет смысл уменьшить количество громоздких и капризных save / restore .
Чем плох метод canvas.transform
Хоть transform и удобен в очень многих случаях, злоупотреблять им не следует. Если вам требуется немного преобразований, то ваш код выиграет, если вы будете использовать более наглядные методы типа rotate() , а сброс/возврат трансформаций реализуете на стеке, который предоставляет контекст: save() / restore() . Всё зависит от задачи.
Чем странен метод canvas.transform
На FireFox 34 обнаружена странная особенность: если первый или третий параметр обращается в 0, то канва умирает(!) и больше на ней ничего не отрисовывается. В моём коде на этот случай есть хак.
Смысл параметров методов transform и setTransform
Смысл параметров методов transform и setTransform очень прост. Первая пара задаёт координаты нового вектора Ox. Вторая пара — вектора Oy. Третья пара — новые координаты точки начала координат.
В качестве координат, используются координаты в текущей системе координат. Без каких-либо преобразований.
Попробуйте вернуться к демьке выше и поиграться. Это очень просто.
Как изменить координаты картинки canvas html js
Canvas — html блок, который появился вместе с выходом html5. Его особенность в том, что он предоставляет js возможность рисовать внутри себя посредством несложного интерфейса.
id="canvas"> Чтобы получить доступ к интерфейсу надо обратиться в js к канвасу и вызвать функцию getContext. Она принимает аргументом контекст, в котором будет рисовать.
var canvas = document.getElementById("canvas"); var canvasContext = canvas.getContext("2d"); В js можно изменить размеры окна canvas. Для этого стоит использовать константы — вряд ли в процессе игры или анимации они будут меняться.
// ./js/constants.js var CANVAS_WIDTH = 1000; var CANVAS_HEIGHT = 600; // ./js/index.js canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; Прямоугольники в canvas
В контексте canvas уже реализованы функции, отрисовывающие прямоугольники. Их всего три:
- clearRect(x, y, width, height) — прямоугольник, работает, как ластик в paint
- strokeRect(x, y, width, height) — контур прямоугольника
- fillRect(x, y, width, height) — закрашенный прямоугольник
Цвета контура и заливки совпадают с цветами, установленными в fillStyle и strokeStyle. Для установки цветов можно использовать как rgb, так и rgba.
Использование линий для отрисовки фигур
Разберём функции рисования прямых линий на примере отрисовки треугольника.
canvasContext.fillStyle = "#660033"; // устанавливает цвет заливки canvasContext.strokeStyle = "#999900"; // устанавливает цвет контура canvasContext.lineWidth = 2; // устанавливает ширину линии canvasContext.beginPath(); // начинает запоминать фигуру canvasContext.moveTo(150, 100); // ставит перо на одну из вершин треугольника canvasContext.lineTo(150, 100); // проводит линию к следующей вершине canvasContext.lineTo(100, 200); // ещё одна линия canvasContext.lineTo(200, 100); // последняя сторона фигуру. Можно и canvasContext.closePath(), но она завершит фигуру canvasContext.fill(); // закрашивает фигуру заливкой canvasContext.stroke(); // обводит фигуру контуром canvasContext.closePath(); // очищает память 
Движение и поворот системы координат
Всё относительно, как говорил один старичок в двадцатом веке. Это правило не обошло и canvas. Добрые разработчики ввели две очень полезные функции:
Первая смещает центр координат в заданную точку, вторая поворачивает его по часовой стрелке на заданный угол вокруг центра координат.
var cordX = 400; var cordY = 400; var radius = 100; var smileAngel = degToRad(90); canvasContext.translate(cordX, cordY); // смещаем центр в центр фигуры пакмена canvasContext.rotate(-smileAngel / 2); // поворачиваем систему координат на заданный угол drawPackmenFigure(canvasContext, 0, 0, 100, "#cccc11", smileAngel); // рисуем пакмена canvasContext.rotate(smileAngel / 2); // возвращаем всё на круги своя canvasContext.translate(-cordX, -cordY); Окружности и дуги
В canvas есть функция отрисовки дуг и окружностей.
arc(centerX, centeY, radius, startAngle, endAngle, direction)
Вот здесь разобран её синтаксис. Вот так можно нарисовать пакмена с её помощью:
function drawPackmenFigure(canvasContext, x, y, radius, color, endAngle) var startPoint = x: x + Math.cos(0) * radius, y: y + Math.sin(0) * radius >; var endPoint = x: x + Math.cos(endAngle) * radius, y: y + Math.sin(endAngle) * radius >; canvasContext.fillStyle = color; canvasContext.beginPath(); // рисуем вырез рта canvasContext.moveTo(x, y); canvasContext.lineTo(startPoint.x, startPoint.y); canvasContext.moveTo(x, y); canvasContext.lineTo(endPoint.x, endPoint.y); // рисуем тело canvasContext.arc(x, y, radius, endAngle, 0, false); canvasContext.fillStyle = color; canvasContext.strokeStyle = color; canvasContext.fill(); canvasContext.closePath(); >; 
Изображения
Кроме того в канвасе есть замечательная функция drawImage, которая рисует выбранную часть изображения с заданными размерами и координатами. Эта громадина может принимать до 9 аргументов. Первым аргументом во всех случаях является объект Image, после идут аргументы, описывающие масштаб и координаты изображения. Существует всего три способа параметризовать эту функцию:
- drawImage(image, x, y) — нарисует image в координатах x, y.
- drawImage(image, x, y, width, height) — нарисует image в координатах x, y размера width на height.
- drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height) — нарисует часть image, обрезанную начиная с точки (sx, sy) размером sWidth, sHeight, в координатах x, y, размера width на height.
Последний способ полезен для работы со спрайтами.
Чтобы глуже погрузиться в технологию canvas, стоит прочитать эту статью.
PS-Group
- PS-Group
- sshambir@gmail.com
- ps-group
- image/svg+xml sshambir
Как изменить координаты картинки canvas html js
Ранее уже рассматривалась установка изображений в качестве фона фигур, но мы также может отдельно выводить изображения на canvas. Для этого у контекста canvas применяется метод drawImage() . Этот метод имеет три версии:
context.drawImage(image, x, y)
context.drawImage(image, x, y, width, height)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Например, применим первую версию метода для вывода изображения:
METANIT.COM
Опять же при выводе изображения нам надо быть уверенными, что изображение уже загружено браузером и готово к использованию, поэтому метод отрисовки изображения помещается в обработчик загрузки изображения img.onload .
Вторая версия метода drawImage() позволяет дополнительно задать ширину и высоту выводимого изображения, что может использоваться для масштабирования изображения:
const canvas = document.getElementById(«canvas»); const context = canvas.getContext(«2d»); const img = new Image(); img.src = «forest2.png»; img.onload = ()=>
Также применим третью форму метода drawImage() :
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const img = new Image(); img.src = "forest2.png"; img.onload = ()=> context.drawImage(img, 0, 100, 300, 200, 20, 30, 300, 200);
Захват изображений с других элементов
Одной из замечательных функциональностей элемента canvas является возможность захвата изображения с другого элемента, например, элемента video или другого элемента canvas. Например:
METANIT.COM
По нажати на кнопку canvas будет получать текущий кадр воспроизводимого видео и фиксировать его в качестве изображения. При этом в метод drawImage в качестве первого параметра передается сам элемент, используемый как источник изображения.
HTML5 CANVAS шаг за шагом: Изображения
Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция:
var img = new Image(); // Новый объект img.onload = function() < // Событие которое будет исполнено в момент когда изображение будет загружено /* Какие-либо действия */ >img.src = 'myImage.png'; // Путь к изображению Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример:
imgExample Ссылка на фидл с примерами для этой стать.
2. Тянем-потянем
Но если бы всё ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущем посте. Итак теперь мы попытаемся масштабировать изображение и для этого существует ещё один способ вызова функции drawImage:
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения Возьмём предыдущий пример и внесём в drawImage некоторые изменения:
ctx.drawImage(pic, 0, 0, 300, 150); Ссылка на фидл с примерами для этой стать.
3. Рисуем фрагмент изображения
Третий вызов drawImage с восемью параметрами, выглядит приблизительно так:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // Первый параметр указывает на изображение // sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике // dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте Возьмём всё тот же пример и подкорректируем функцию drawImage в третий раз:
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110); Ссылка на фидл с примерами для этой стать.
4. Задача
Теперь осталось закрепить всё пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это изображение я нарисовал собственноручно в программе Pinta под Ubuntu.
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. Траву и песок делалось путём заливки облости соответствующим цветом и добавки шума. Всё конечно представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[… значения x и y указывают какой элемент из картинки брать. Т.е. если исходный рисунок разбить на квадрат 32×32 то станет понятней.
И форэкзампл:
imgExample