snipplets.dev/code/JavaScript/Canvas/drawImage.js

45 lines
2.9 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// void ctx.drawImage(image, dx, dy);
// void ctx.drawImage(image, dx, dy, dWidth, dHeight);
// void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// image
// Элемент для отображения в контексте.
// Функция принимает любой источник изображения, пригодный для отображения
// на холсте
// dx
// Координата по оси Х, обозначающая стартовую точку холста-приёмника,
// в которую будет помещён верхний левый угол исходного image.
// dy
// Координата по оси Y, обозначающая стартовую точку холста-приёмника,
// в которую будет помещён верхний левый угол исходного image.
// dWidth
// Ширина изображения, полученного из исходного image.
// Эта опция позволяет масштабировать изображение по ширине.
// Если опция не задана, изображение не будет масштабировано.
// dHeight
// Высота изображения, полученного из исходного image.
// Эта опция позволяет масштабировать изображение по высоте.
// Если опция не задана, изображение не будет масштабировано.
// sx
// Координата по оси X верхнего левого угла фрагмента,
// который будет вырезан из изображения-источника и помещён в контекст-приёмник.
// sy
// Координата по оси Y верхнего левого угла фрагмента,
// который будет вырезан из изображения-источника и помещён в контекст-приёмник.
// sWidth
// Ширина фрагмента, который будет вырезан из изображения источника
// и помещён в контекст-приёмник. Если не задана, фрагмент от точки,
// заданной sx и sy до правого нижнего угла источника
// будет целиком скопирован в контекст-приёмник.
// sHeight
// Высота фрагмента, который будет вырезан из изображения источника
// и помещён в контекст-приёмник.
function Draw() {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let image = document.getElementById('source');
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
}