Ранее уже рассматривалась установка изображений в качестве фона фигур, но мы также может отдельно выводить изображения на canvas.
Для этого у контекста canvas
применяется метод drawImage(). Этот метод имеет три версии:
context.drawImage(image, x, y)
Здесь параметр image передает выводимое изображение, а параметры x и y - координаты верхнего левого угла изображения.
context.drawImage(image, x, y, width, height)
С помощью дополнительных параметров width и height позволяет соответственно задать ширину и высоту выводимого изображения.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Где параметры sx
и sy
представляют координаты на изображении, с которого начиется обрезка изображения, а параметры
sWidth
и sHeight
представляют соответственно ширину и высоту выреза относительно координат sx и sy.
Параметры dx
и dy
указывают координаты отрисовки обрезанного изображения на canvas, а dWidth
и dHeight
указывают соответственно на ширину и высоту изображения на canvas.
Например, применим первую версию метода для вывода изображения:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <canvas id="canvas" width="450" height="300"></canvas> <script> const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const img = new Image(); img.src = "forest2.png"; img.onload = ()=> context.drawImage(img, 0, 0); </script> </body> </html>
Опять же при выводе изображения нам надо быть уверенными, что изображение уже загружено браузером и готово к использованию, поэтому метод отрисовки изображения
помещается в обработчик загрузки изображения 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, 10, 10, 180, 150); context.drawImage(img, 200, 10, 180, 150); }
Также применим третью форму метода 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. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <video id="myVideo" src="cats.mp4" width="300" height="200" controls ></video> <canvas id="canvas" width="300" height="200" style="background-color:#eee; border:1px solid #ccc;"></canvas> <div><button id="snap">Сделать снимок</button></div> <script> const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const video = document.getElementById("myVideo"); document.getElementById("snap").onclick = () => context.drawImage(video, 0, 0, 300, 200); </script> </body> </html>
По нажати на кнопку canvas будет получать текущий кадр воспроизводимого видео и фиксировать его в качестве изображения. При этом в метод drawImage
в качестве первого параметра передается сам элемент, используемый как источник изображения.