This commit is contained in:
2021-11-15 02:50:46 +03:00
parent 39704489b8
commit e4c0f96c74
8 changed files with 101 additions and 0 deletions

6
JavaScript/README.md Normal file
View File

@ -0,0 +1,6 @@
# JavaScript
## Canvas
- [Drawing text](drawing-text.js)
- [measureText()](measureText.js) - возвращает информацию об измеренном тексте, например ширину
- [`drawImage()`](canvas.drawImage.js) - метод Canvas 2D API рисования изображения на холсте

View File

@ -0,0 +1,44 @@
// 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);
}

View File

@ -0,0 +1,14 @@
function Draw() {
let context = document.getElementById('canvas').getContext('2d');
// Styling text
// font = value
// textAlign = value | *start, end, left, right, center
// textBaseline = value | top, hanging, middle, *alphabetic, ideographic, bottom
// direction = value | ltr, rtl, *inherit
// fillText(text, x, y [, maxWidth])
// strokeText(text, x, y [, maxWidth])
context.font = '48px serif';
context.fillText('Hello world', 10, 50);
}

View File

@ -0,0 +1,6 @@
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let text = ctx.measureText('Hello world');
console.log(text.width); // 56;