45 lines
2.9 KiB
JavaScript
45 lines
2.9 KiB
JavaScript
|
// 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);
|
|||
|
}
|