start

JavaScript/README.md

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

JavaScript/canvas.drawImage.js

@@ -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);
+}

JavaScript/drawing-text.js

@@ -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);
+}

JavaScript/measureText.js

@@ -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;
+