update README for JavaScript
This commit is contained in:
44
code/JavaScript/Canvas/drawImage.js
Normal file
44
code/JavaScript/Canvas/drawImage.js
Normal 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);
|
||||
}
|
||||
14
code/JavaScript/Canvas/drawText.js
Normal file
14
code/JavaScript/Canvas/drawText.js
Normal 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);
|
||||
}
|
||||
5
code/JavaScript/Canvas/measureText.js
Normal file
5
code/JavaScript/Canvas/measureText.js
Normal file
@@ -0,0 +1,5 @@
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
let text = ctx.measureText('Hello world');
|
||||
console.log(text.width); // 56;
|
||||
Reference in New Issue
Block a user