Рисование изображений на Canvas в HTML5

HTML5 Canvas использует функцию drawImage() для рисования изображений, перед тем как нарисовать изображение на холсте, нужно создать объект Image и затем загрузить изображение в память.

HTML5 холст имеет опции для рисования изображений на нем. Вы можете использовать различные функции объекта 2D контекста drawImage() для выполнения этой операции. Есть три различных функции drawImage():

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Первый параметр image — это изображение, которое нужно нарисовать. В этой статье稍źniej будет объяснено, как создавать и загружать изображения.
В параметрах dx и dy являются краткосрочными «destinationX» и «destinationY». Эти параметры определяют положение изображения на холсте при его рисовании.
В параметрах dw и dh являются краткосрочными «destinationWidth» и «destinationHeight». Эти параметры определяют размер изображения при его масштабировании при рисовании.
Параметры sx и sy являются краткими «sourceX» и «sourceY». Эти параметры определяют, с какой позиции из исходного изображения начнется копирование прямоугольника на канвас.
Параметры sw и sh являются краткими «sourceWidth» и «sourceHeight»

Создание и загрузка изображения

Прежде чем нарисовать изображение на канвасе, необходимо создать объект Image и загрузить изображение в память. Это можно сделать с помощью JavaScript:

var image = new Image();
image.src = "https://ru.oldtoolbag.com/en/run/html/canvas-shot.png";

Необходимо полностью загрузить изображение, чтобы можно было нарисовать его. Чтобы определить, полностью ли загружено изображение, добавьте к нему слушатель событий. Этот слушатель событий вызывается при загрузке изображения. Он выглядит так:

image.addEventListener('load', drawImage1);

Параметр drawImage1 является функцией, которая вызывается при срабатывании события.
Это полный пример кода, который можно создать на канвасе, загрузить и нарисовать изображение:

window.onload = function() {
　　　　drawEx1();
}
var image1 = null;
function drawEx1() {
　　　　image1 = new Image();
　　　　image1.src =
　　　　　　　　"https://ru.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener('load', drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1, 10, 10);
}

Это результат кода, который был использован для рисования на канвасе:

Canvas не поддерживается

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

Как было сказано в начале статьи, вы можете масштабировать изображение при его рисовании. Это пример кода, который рисует изображение и масштабирует его до ширины 200 и высоты 100 пикселей:

var width = 200;
var height = 100;
context.drawImage(image2, 10, 10, width, height);

Вот как выглядит изображение при рисовании на канвасе, с масштабированной шириной и высотой:

Canvas не поддерживается

Рисование части изображения

Можно нарисовать только часть изображения на канвасе. Рисуемая часть - это копированный прямоугольник из изображения. Вот пример кода:

var dx = 10;
var dy = 10;
var dw = 75;
var dh = 75;
var sx = 20;
var sy = 20;
var sw = 75;
var sh = 75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

Параметры sx, sy, sw и sh (создается sx, sy начальный прямоугольник изображения) и ширина (sw) и высота (sh) прямоугольника.

Вот как выглядит вид изображения в виде прямоугольника при рисовании на канвасе:

Canvas не поддерживается