From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../api/canvasrenderingcontext2d/arc/index.html | 226 +++++++++++ .../api/canvasrenderingcontext2d/arcto/index.html | 256 ++++++++++++ .../canvasrenderingcontext2d/beginpath/index.html | 128 ++++++ .../beziercurveto/index.html | 193 +++++++++ .../api/canvasrenderingcontext2d/canvas/index.html | 66 +++ .../canvasrenderingcontext2d/clearrect/index.html | 187 +++++++++ .../canvasrenderingcontext2d/closepath/index.html | 114 ++++++ .../createlineargradient/index.html | 119 ++++++ .../currenttransform/index.html | 90 +++++ .../canvasrenderingcontext2d/drawimage/index.html | 328 +++++++++++++++ .../canvasrenderingcontext2d/ellipse/index.html | 139 +++++++ .../api/canvasrenderingcontext2d/fill/index.html | 127 ++++++ .../canvasrenderingcontext2d/fillrect/index.html | 175 ++++++++ .../canvasrenderingcontext2d/fillstyle/index.html | 127 ++++++ .../canvasrenderingcontext2d/filltext/index.html | 172 ++++++++ .../api/canvasrenderingcontext2d/font/index.html | 94 +++++ .../getimagedata/index.html | 108 +++++ .../getlinedash/index.html | 79 ++++ .../globalalpha/index.html | 140 +++++++ .../ru/web/api/canvasrenderingcontext2d/index.html | 449 +++++++++++++++++++++ .../canvasrenderingcontext2d/linecap/index.html | 132 ++++++ .../linedashoffset/index.html | 149 +++++++ .../canvasrenderingcontext2d/linejoin/index.html | 143 +++++++ .../api/canvasrenderingcontext2d/lineto/index.html | 116 ++++++ .../canvasrenderingcontext2d/linewidth/index.html | 179 ++++++++ .../measuretext/index.html | 69 ++++ .../canvasrenderingcontext2d/miterlimit/index.html | 118 ++++++ .../api/canvasrenderingcontext2d/moveto/index.html | 172 ++++++++ .../putimagedata/index.html | 177 ++++++++ .../api/canvasrenderingcontext2d/rect/index.html | 173 ++++++++ .../canvasrenderingcontext2d/restore/index.html | 76 ++++ .../api/canvasrenderingcontext2d/rotate/index.html | 120 ++++++ .../api/canvasrenderingcontext2d/save/index.html | 84 ++++ .../api/canvasrenderingcontext2d/stroke/index.html | 116 ++++++ .../canvasrenderingcontext2d/strokerect/index.html | 173 ++++++++ .../strokestyle/index.html | 205 ++++++++++ .../canvasrenderingcontext2d/stroketext/index.html | 167 ++++++++ .../canvasrenderingcontext2d/textalign/index.html | 130 ++++++ .../textbaseline/index.html | 100 +++++ 39 files changed, 5916 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/arcto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/closepath/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/fill/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/filltext/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/lineto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/moveto/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/restore/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/stroke/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d') diff --git a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..b6ab5c6600 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,226 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - API + - Рисование + - Рисование в 2d + - Функция + - Холст + - метод +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.arc() метод Canvas 2D API добавляет дугу к пути с центром (x, y) и с радиусом r  с началом в startAngle и с концом endAngle и с направлением против часовой стрелки (по умолчанию по часовой стрелке).

+ +

Синтаксис

+ +
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+ +

Параметры

+ +
+
x
+
X координата центра дуги.
+
y
+
Y координата центра дуги.
+
radius
+
Радиус.
+
startAngle
+
Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.
+
endAngle
+
Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.
+
anticlockwise {{optional_inline}}
+
Необязательный {{jsxref("Boolean")}}. Задаёт направление рисования дуги.
+ Если true - против часовой, false - по часовой.
+
+ +

Примеры

+ +

Использование метода arc

+ +

Ниже приведен пример простого кода который рисует круг.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Демонстрация разных форм дуг

+ +

В этом примере нарисованные разные формы чтобы показать возможности метода arc().

+ +
+
HTML
+ +
<canvas id="canvas" width="150" height="200"></canvas>
+
+ +
JavaScript
+
+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (i=0;i<4;i++){
+  for(j=0;j<3;j++){
+    ctx.beginPath();
+    var x              = 25+j*50;               // x coordinate
+    var y              = 25+i*50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
+    var anticlockwise  = i%2==1;                // Draw anticlockwise
+
+    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
+
+    if (i>1){
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКоментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Примечания относительно Gecko

+ +

Начиная с Gecko 2.0 {{geckoRelease("2.0")}}:

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html new file mode 100644 index 0000000000..53a13ff758 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html @@ -0,0 +1,256 @@ +--- +title: CanvasRenderingContext2D.arcTo() +slug: Web/API/CanvasRenderingContext2D/arcTo +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/arcTo +--- +
{{APIRef}}
+ +

В Canvas 2D API есть метод CanvasRenderingContext2D.arcTo(). Он добавляет дугу к контуру (path) с заданными контрольными точками и радиусом, соединяя их прямой линией с предыдущей точкой контура.

+ +

Обычно метод используется для скругления углов.

+ +
+

Примечание: Помните, что вы можете получить неожиданный результат при использовании большого радиуса: соединтельная линия дуги будет идти в любом направлении, в котором она должна соответствовать указанному радиусу.

+
+ +

Синтаксис

+ +
void ctx.arcTo(x1, y1, x2, y2, radius);
+
+ +

Параметры

+ +
+
x1
+
Координата x первой контрольной точки.
+
y1
+
Координата y первой контрольной точки.
+
x2
+
Координата x второй контрольной точки.
+
y2
+
Координата y второй контрольной точки.
+
radius
+
Радиус дуги. Не может быть отрицательным.
+
+ +

Примеры

+ +

Как работает arcTo

+ +

Один из способов понять как работает arcTo() - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без arcTo() эти два сегмента образовали бы остый угол: arcTo() cоздаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Касательная линия
+ctx.beginPath();
+ctx.strokeStyle = 'gray';
+ctx.moveTo(200, 20);
+ctx.lineTo(200, 130);
+ctx.lineTo(50, 20);
+ctx.stroke();
+
+// Дуга
+ctx.beginPath();
+ctx.strokeStyle = 'black';
+ctx.lineWidth = 5;
+ctx.moveTo(200, 20);
+ctx.arcTo(200,130, 50,20, 40);
+ctx.stroke();
+
+// Начальная точка
+ctx.beginPath();
+ctx.fillStyle = 'blue';
+ctx.arc(200, 20, 5, 0, 2 * Math.PI);
+ctx.fill();
+
+// Контрольные точки
+ctx.beginPath();
+ctx.fillStyle = 'red';
+ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Первая контрольная точка
+ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Вторая контрольная точка
+ctx.fill();
+ +

Результат

+ +

В этом примере контур, созданный с помощью arcTo() жирный и чёрный. Касательная линия серия, контрольные точки красные, а начальная точка синяя. 

+ +

{{ EmbedLiveSample('Как_работает_arcTo', 315, 165) }}

+ +

Создание скругленного угла

+ +

В этом примере создаётся скруглённый угол с использованием arcTo(). Это ещё один метод, который часто используется.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +

Дуга начинается в точке, заданной в moveTo(): (230, 20). Она сформирована так, чтобы соответствовать точкам на (90, 130) и (20, 20) с радиусом 50. Метод lineTo() соединяет дугу с (20, 20) прямой линией. Заметьте, что вторая контрольная точка дуги и точка, заданная в lineTo() одинаковые, что создаёт абсолютно гладкий угол.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const p0 = { x: 230, y: 20  }
+const p1 = { x: 90,  y: 130 }
+const p2 = { x: 20,  y: 20  }
+
+const labelPoint = function (p) {
+  const offset = 15;
+  ctx.fillText('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset);
+}
+
+ctx.beginPath();
+ctx.moveTo(p0.x, p0.y);
+ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
+ctx.lineTo(p2.x, p2.y);
+
+labelPoint(p0);
+labelPoint(p1);
+labelPoint(p2);
+
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Создание_скругленного_угла', 315, 165) }}

+ +

Результат с большим радиусом

+ +

Если вы используете относительно большой радиус, дуга может появиться в том месте, где вы её не ожидаете. В данном примере соединительная линия дуги идёт вверху, а не внизу. Это происходит потому что радиус слишком большой, чтобы уместить дугу между точками.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(180, 90);
+ctx.arcTo(180,130, 110,130, 130);
+ctx.lineTo(110, 130);
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Результат_с_большим_радиусом', 315, 165) }}

+ +

Живая демонстрация

+ +

Более сложная демонстрация метода. Вы можете поиграть с диапазоном ввода, чтобы увидеть, как изменяется дуга.

+ +

HTML

+ +
<div>
+  <label for="radius">Radius: </label>
+  <input name="radius"  type="range" id="radius" min=0 max=100 value=50>
+  <label for="radius"  id="radius-output">50</label>
+</div>
+<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx    = canvas.getContext('2d');
+
+const controlOut = document.getElementById('radius-output');
+const control    = document.getElementById('radius');
+      control.oninput = () => {
+          controlOut.textContent = r = control.value;
+      };
+
+const mouse = { x: 0, y: 0 };
+
+let   r  = 100; // Radius
+const p0 = { x: 0, y: 50 };
+
+const p1 = { x: 100, y: 100 };
+const p2 = { x: 150, y: 50 };
+const p3 = { x: 200, y: 100 };
+
+const labelPoint = function (p, offset, i = 0){
+    const {x, y} = offset;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
+}
+
+const drawPoints = function (points){
+  for (let i = 0; i < points.length; i++) {
+    var p = points[i];
+    labelPoint(p, { x: 0, y: -20 } , i)
+  }
+}
+
+// Draw arc
+const drawArc = function ([p0, p1, p2], r) {
+  ctx.beginPath();
+  ctx.moveTo(p0.x, p0.y);
+  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.stroke();
+}
+
+
+let t0 = 0;
+let rr = 0; // радиус, который меняется со временем
+let a  = 0; // angle
+let PI2 = Math.PI * 2;
+const loop = function (t) {
+  t0 = t / 1000;
+  a  = t0 % PI2;
+  rr = Math.abs(Math.cos(a) * r);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  drawArc([p1, p2, p3], rr);
+  drawPoints([p1, p2, p3]);
+  requestAnimationFrame(loop);
+}
+
+loop(0);
+ +

Результат

+ +

{{EmbedLiveSample('Живая_демонстрация', 315, 200) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ +

{{Compat("api.CanvasRenderingContext2D.arcTo")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..2f6aa4c3e1 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.beginPath() Canvas 2D API запускает новый путь, опуская список подпутей. Вызовите этот метод, когда хотите создать новый путь.

+ +

Синтакс

+ +
void ctx.beginPath();
+
+ +

Примеры

+ +

Использование beginPath метода

+ +

Это простой фрагмент кода, использующий beginPath метод.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Первый путь
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Второй путь
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+
+ +

Отредактируйте код ниже чтобы увидеть изменения в canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:200px">
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 460) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.beginPath")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html new file mode 100644 index 0000000000..209c19e523 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -0,0 +1,193 @@ +--- +title: CanvasRenderingContext2D.bezierCurveTo() +slug: Web/API/CanvasRenderingContext2D/bezierCurveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +--- +
{{APIRef}}
+ +

Сводка

+ +

Метод CanvasRenderingContext2D.bezierCurveTo(), предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} перед созданием кривой Безье.

+ +

Синтаксис

+ +
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+
+ +

Параметры

+ +
+
cp1x
+
Координата первой контрольной точки по оси x.
+
cp1y
+
Координата первой контрольной точки по оси y.
+
cp2x
+
Координата второй контрольной точки по оси x.
+
cp2y
+
Координата второй контрольной точки по оси y.
+
x
+
Координата конечной точки по оси x.
+
y
+
Координата конечной точки по оси y.
+
+ +

Примеры

+ +

Использование метода bezierCurveTo

+ +

Ниже представлен простой фрагмент кода, рисующий кривую Безье. Контрольные точки нарисованы красным цветом, а начальная и конечная точки - синим.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,20);
+ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// начальная точка
+ctx.fillRect(50, 20, 10, 10);
+// конечная точка
+ctx.fillRect(50, 100, 10, 10);
+
+ctx.fillStyle = 'red';
+// первая контрольная точка
+ctx.fillRect(230, 30, 10, 10);
+// вторая контрольная точка
+ctx.fillRect(150, 70, 10, 10);
+ +

{{ EmbedLiveSample('Использование_метода_bezierCurveTo', 315, 165) }}

+ +

Практическое применение bezierCurveTo

+ +

Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Практическое_применение_bezierCurveTo', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..8d483e62a7 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,66 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.canvas является доступной только для чтения ссылкой на объект {{domxref("HTMLCanvasElement")}}, связанный с текущим контекстом. Может иметь значение {{jsxref("null")}}, если контекст не связан с элементом {{HTMLElement("canvas")}}.

+ +

Синтаксис

+ +
ctx.canvas;
+ +

Примеры

+ +

Создадим элемент {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

Вы можете получить ссылку на этот элемент из объекта CanvasRenderingContext2D, используя свойство canvas:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

 

+ +

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.

+ +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..33e198ddec --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,187 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.clearRect(), предоставляемый Canvas 2D API, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой (x, y) и размерами (width, height), таким образом стирая любое ранее нарисованное содержимое.

+ +

Синтаксис

+ +
void ctx.clearRect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода clearRect

+ +

Ниже представлен простой фрагмент кода, использующий метод clearRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// очистить весь холст
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:140px;">
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 400) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html new file mode 100644 index 0000000000..b061088116 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html @@ -0,0 +1,114 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.closePath() - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.

+ +

Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} и {{domxref("CanvasRenderingContext2D.fill()", "fill()")}}.

+ +

Синтаксис

+ +
void ctx.closePath();
+
+ +

Примеры

+ +

Замкнутый треугольник

+ +

В этом примере создаются две первые линии  сторон треугольника с испоьзованием метода lineTo(). После чего метод closePath() заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 140);   // Двигает перо к нижнему левому углу
+ctx.lineTo(120, 10);   // Рисует линию к верхнему углу
+ctx.lineTo(220, 140);  // Рисует линию к нижнему правому углу
+ctx.closePath();       // Рисует линию к нижнему левому углу
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}

+ +

Закрытие пути один раз

+ +

Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).

+ +
+

Хотя closePath() вызывается после создания всех дуг, закрывается только последняя.

+
+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Первые две дуги создают глаза, последняя создает рот.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(240, 20, 40, 0, Math.PI);
+ctx.moveTo(100, 20);
+ctx.arc(60, 20, 40, 0, Math.PI);
+ctx.moveTo(215, 80);
+ctx.arc(150, 80, 65, 0, Math.PI);
+ctx.closePath();
+ctx.lineWidth = 6;
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.closePath")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html new file mode 100644 index 0000000000..9337731350 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -0,0 +1,119 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +tags: + - API + - Градиент + - Холст + - метод +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.createLinearGradient(), предоставляемый Canvas 2D API, создает градиент вдоль линии, соединенной двумя точками с заданными координатами.

+ +

+ +

Этот метод возвращает линейный {{domxref("CanvasGradient")}}. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.

+ +
+

Заметка: Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.

+
+ +

Синтаксис

+ +
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+
+ +

Метод createLinearGradient() принимает четыре аргумента для определения начала и конца точек линии градиента.

+ +

Параметры

+ +
+
x0
+
Координата по оси X начальной точки.
+
y0
+
Координата по оси Y начальной точки.
+
x1
+
Координата по оси X конечной точки.
+
y1
+
Координата по оси Y конечной точки.
+
+ +

Возвращаемое значение

+ +
+
{{domxref("CanvasGradient")}}
+
Линейный CanvasGradient, определенный линией.
+
+ +

Примеры

+ +

Заполнение прямоугольника с линейным градиентом

+ +

В примере создается и добавляется линейный градиент, используя метод createLinearGradient(). Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Создание линейного градиента
+// Точка начала линии градиента: x=20, y=0
+// Точка конца линии градиента: x=220, y=0
+var gradient = ctx.createLinearGradient(20,0, 220,0);
+
+// Добавление трёх контрольных точек
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(.5, 'cyan');
+gradient.addColorStop(1, 'green');
+
+// Установка стиля заливки и отрисовка прямоугольника градиента
+ctx.fillStyle = gradient;
+ctx.fillRect(20, 20, 200, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Заполнение_прямоугольника_с_линейным_градиентом', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

+ +

Специфично для Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html new file mode 100644 index 0000000000..0e13fcc970 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html @@ -0,0 +1,90 @@ +--- +title: CanvasRenderingContext2D.currentTransform +slug: Web/API/CanvasRenderingContext2D/currentTransform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Property +translation_of: Web/API/CanvasRenderingContext2D/currentTransform +--- +
{{APIRef()}} {{SeeCompatTable}}
+ +

Свойство CanvasRenderingContext2D.currentTransform, предоставляемое Canvas 2D API, возвращает или устанавливает объект {{domxref("SVGMatrix")}} для текущей матрицы преобразований.

+ +

Синтаксис

+ +
ctx.currentTransform [= value];
+
+ +
+
value
+
Объект {{domxref("SVGMatrix")}}, который будет использован в роли текущей матрицы преобразований.
+
+ +

Примеры

+ +

Использование метода currentTransform

+ +

Ниже представлен простой фрагмент кода, использующий свойство currentTransform для установки матрицы преобразований.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let matrix = ctx.currentTransform;
+matrix.a = 1;
+matrix.b = 1;
+matrix.c = 0;
+matrix.d = 1;
+matrix.e = 0;
+matrix.f = 0;
+ctx.currentTransform = matrix;
+ctx.fillRect(0, 0, 100, 100);
+ +

Результат

+ +

{{ EmbedLiveSample('Manually_changing_the_matrix', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.currentTransform")}}

+ +

 

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html new file mode 100644 index 0000000000..881eb779d2 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -0,0 +1,328 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Ссылка + - метод +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.drawImage() метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.

+ +

Синтаксис

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

drawImage

+ +

Параметры

+ +
+
image
+
Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}},  {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.
+
dx
+
Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного image.
+
dy
+
Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного image.
+
dWidth
+
Ширина изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.
+
dHeight
+
Высота изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.
+
sx
+
Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.
+
sy
+
Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.
+
sWidth
+
Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной sx и sy до правого нижнего угла источника будет целиком скопирован в контекст-приемник.
+
sHeight
+
Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.
+
+ +

Исключения

+ +
+
INDEX_SIZE_ERR
+
Выбрасывается, если ширина или высота источника или приемника равна нулю.
+
INVALID_STATE_ERR
+
Источник не имеет данных изображения.
+
TYPE_MISMATCH_ERR
+
Тип данных источника не поддерживается.
+
+ +

Примеры

+ +

Использование метода drawImage

+ +

Вот простой пример использования drawImage.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+</div>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Понимание размеров изображения-источника

+ +

Метод drawImage() использует внутренние размеры элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).

+ +

Например, если изображение было загружено с использованием необязательных параметров width и height в конструкторе {{domxref("HTMLImageElement")}}, вместо element.width и element.height вам следует использовать свойства naturalWidth и naturalHeight экземпляра картинки (или videoWidth и videoHeight, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var image = new Image(60, 45);   // Размер изображения
+image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено
+
+// load an image of intrinsic size 300x227 in CSS pixels
+image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
+function drawImageActualSize() {
+  // use the intrinsic size of image in CSS pixels for the canvas element
+  canvas.width = this.naturalWidth;
+  canvas.height = this.naturalHeight;
+
+  // will draw the image as 300x227 ignoring the custom size of 60x45
+  // given in the constructor
+  ctx.drawImage(this, 0, 0);
+
+  // To use the custom size we'll have to specify the scale parameters
+  // using the element's width and height properties - lets draw one
+  // on top in the corner:
+  ctx.drawImage(this, 0, 0, this.width, this.height);
+}
+ +

Результат

+ +

{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}

+ +

 

+ +

Спецификация

+ +

 

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap как источник{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
SVGImageElement как источник{{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoDesktop(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Сглаживание при сжатии{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(56)}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap как источник{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
SVGImageElement как источник{{CompatChrome(59)}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoMobile(56)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Сглаживание при сжатии{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(56)}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1] См. {{bug(1360415)}}

+ +

Дополнительно о совместимости

+ + + +

Дополнительно

+ + + +

См. также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html new file mode 100644 index 0000000000..17b037d4f0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -0,0 +1,139 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Справка + - метод +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.ellipse() - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.

+ +

Синтаксис

+ +
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
+
+ +

ellipse() - метод, который создает эллиптическую дугу с центром в точках (x, y) с радиусом radiusX и radiusY. Путь начинается от точки startAngle и заканчивается в точке endAngle, идет по направлению, казанному в параметре (по часовай срелке или против нее) anticlockwise .

+ +

Параметры

+ +
+
x
+
Координата центра эллипса по оси x (горизонтальная).
+
y
+
Координата центра эллипса по оси y (вертикальная).
+
radiusX
+
Радиус оси x эллипса. Должен быть неотрицательным.
+
radiusY
+
Радиус оси y эллипса. Должен быть неотрицательным.
+
rotation
+
Вращение эллипса, выраженное в радианах.
+
startAngle
+
Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.
+
endAngle
+
Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.
+
anticlockwise {{optional_inline}}
+
Опция {{jsxref("Boolean")}}, которая при true, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно false  - рисование по часовой стрелке (clockwise).
+
+ +

Примеры

+ +

Рисование полного эллипса

+ +

Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).

+ +

HTML

+ +
<canvas id="canvas" width="200" height="200"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисование эллипса
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
+ctx.stroke();
+
+// Рисование линии отражения эллипса
+ctx.beginPath();
+ctx.setLineDash([5, 5]);
+ctx.moveTo(0, 200);
+ctx.lineTo(200, 0);
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}

+ +

Различные эллиптические дуги

+ +

В этом примере создаются три эллиптических контура с различными свойствами.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
+ctx.fill();
+
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
+ctx.fill();
+
+ctx.fillStyle = 'green';
+ctx.beginPath();
+ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
+ctx.fill();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость браузера

+ + + +

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

+ +

Изучите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html new file mode 100644 index 0000000000..25cc791848 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html @@ -0,0 +1,127 @@ +--- +title: CanvasRenderingContext2D.fill() +slug: Web/API/CanvasRenderingContext2D/fill +tags: + - API + - Canvas + - Method + - Reference + - Справка + - метод +translation_of: Web/API/CanvasRenderingContext2D/fill +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.fill() метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.

+ +

Синтаксис

+ +
void ctx.fill([fillRule]);
+void ctx.fill(path[, fillRule]);
+
+ +

Параметры

+ +
+
fillRule
+
Выбор алгоритма заливки фигуры
+ Возможные значения: + +
+
path
+
{{domxref("Path2D")}} путь для заливки.
+
+ +

Пример

+ +

Использование метода fill

+ +

Это всего лишь простой фрагмент кода, который использует метод fill для заполнения пути.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.fill();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Характеристики

+ + + + + + + + + + + + + + +
ХарактеристикаСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость

+ + + +

{{Compat("api.CanvasRenderingContext2D.fill")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..54a27df26c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,175 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.fillRect(), предоставляемый Canvas 2D API, рисует залитый прямоугольник в позиции (x, y), размер которого определяется аргументами width и height, и стиль которого определяется атрибутом {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}.

+ +

Синтаксис

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода fillRect

+ +

Ниже представлен простой фрагмент кода, использующий метод fillRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// залить canvas целиком
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..791c8fed7c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,127 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.fillStyle, предосталяемое Canvas 2D API, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение #000 (черный цвет).

+ +
+

См. также главу Applying styles and color в Canvas Tutorial.

+
+ +

Синтаксис

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Значения

+ +
+
color
+
{{domxref("DOMString")}} строка, содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).
+
gradient
+
Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).
+
pattern
+
Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).
+
+ +

Примеры

+ +

Изменение цвета заливки фигуры

+ +

Ниже представлен простой фрагмент кода, использующий fillStyle с цветом.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+ +

Результат

+ +

{{ EmbedLiveSample('Изменение_цвета_заливки_фигуры', 700, 160) }}

+ +

Использование fillStyle в циклах for

+ +

В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные i и j, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+for (let i = 0; i < 6; i++) {
+  for (let j = 0; j < 6; j++) {
+    ctx.fillStyle = `rgb(
+        ${Math.floor(255 - 42.5 * i)},
+        ${Math.floor(255 - 42.5 * j)},
+        0)`;
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}
+ +

Результат:

+ +

{{EmbedLiveSample("Использование_fillStyle_в_циклах_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость

+ + + +

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+ +

В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод ctx.setFillColor() в дополнение к этому.

+ + + +

В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setFillColor().

+ +
setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html new file mode 100644 index 0000000000..8a56e89043 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html @@ -0,0 +1,172 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.fillText(), предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (x, y). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.

+ +

См. также метод {{domxref("CanvasRenderingContext2D.strokeText()")}} для выполнения обводки текста.

+ +

Синтаксис

+ +
void ctx.fillText(text, x, y [, maxWidth]);
+
+ +

Параметры

+ +
+
text
+
Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
+ +
+
x
+
Коодрдината левой нижней точки текста по оси x.
+
y
+
Коодрдината левой нижней точки текста по оси y.
+
maxWidth {{optional_inline}}
+
Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.
+
+ +

Примеры

+ +

Использование метода fillText

+ +

Ниже представлен простой фрагмент кода, использующий fillText.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
+

Спецификация

+ 		СтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/font/index.html b/files/ru/web/api/canvasrenderingcontext2d/font/index.html new file mode 100644 index 0000000000..0f61487769 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/font/index.html @@ -0,0 +1,94 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/font +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.font – свойство Canvas 2D API, определяющее  текущие стили рисуемого текста. Это строка, которая использует синтаксис CSS font.

+ +

Синтаксис

+ +
ctx.font = value;
+
+ +

Опции

+ +
+
value
+
Строка {{domxref("DOMString")}} с разобранным CSS {{cssxref("font")}} значением. Значение по-умолчанию – "10px sans-serif".
+
+ +

Примеры

+ +

Использование пользовательского шрифта

+ +

Этот пример задает в своействе font другие font-size и font-family.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.font = 'bold 48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Использование_пользовательского_шрифта', 700, 180) }}

+ +

Загрузка шрифта с помощью CSS Font Loading API

+ +

С помощью {{domxref("FontFace")}} API, вы можете явно загрузить шрифт перед использованием его в canvas.

+ +
let f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Ready to use the font in a canvas context
+});
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.font")}}

+ +

Особенности Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..879efff5f0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,108 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.getImageData() - метод Canvas 2D API, возвращает объект {{domxref("ImageData")}}, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке (sx, sy) и имеет ширину sw и высоту sh.

+ +

Синтаксис

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Параметры

+ +
+
sx
+
Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.
+
sy
+
Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.
+
sw
+
Ширина прямоугольника, из которого будет извлечен ImageData.
+
sh
+
Высота прямоугольника, из которого будет извлечен ImageData.
+
+ +

Возвращаемое значение

+ +

Объект {{domxref("ImageData")}}, содержащий данные изображения для данного прямоугольника холста.

+ +

Выбрасываемые ошибки

+ +
+
IndexSizeError
+
Выбрасывает, если аргумент высоты или ширины равен нулю.
+
SecurityError
+
The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid SecurityError being thrown in this situation, configure CORS to allow the source image to be used in this way. See Allowing cross-origin use of images and canvas.
+
+ +

Примеры

+ +

 

+ +

Getting image data from a canvas

+ +

This example draws a rectangle, and then uses getImageData() to grab a portion of the canvas.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +

The object retrieved by getImageData() has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+let imageData = ctx.getImageData(60, 60, 200, 100);
+ctx.putImageData(imageData, 150, 10);
+ +

Result

+ +

{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}

+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

 

+ +

См также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html new file mode 100644 index 0000000000..8d1ad2b626 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html @@ -0,0 +1,79 @@ +--- +title: CanvasRenderingContext2D.getLineDash() +slug: Web/API/CanvasRenderingContext2D/getLineDash +translation_of: Web/API/CanvasRenderingContext2D/getLineDash +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContect2D.getLineDash(), предоставляемый Canvas 2D API который возвращает текущий паттерн штриховки линии.

+ +

Синтаксис

+ +
ctx.getLineDash();
+ +

Возвращаемое значение

+ +

{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в еденицах пространства координат). Если число заданных элементов нечетное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как [5, 15, 25] в результате мы получим [5, 15, 25, 5, 15, 25].

+ +

Примеры

+ +

Получение текущей настройки штриховки линии

+ +

Этот пример демонстрирует метод getLineDash().

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Используя {{domxref("CanvasRenderingContext2D.setLineDash()", "setLineDash()")}} задано, что шрихи состоят из отрезков в 10 еденииц и разрывами между ними в 20 едениц.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([10, 20]);
+console.log(ctx.getLineDash());  // [10, 20]
+
+// Нарисовать штрихованную линию
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+ +

Результат

+ +

{{ EmbedLiveSample('Getting_the_current_line_dash_setting', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.getLineDash")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html new file mode 100644 index 0000000000..452657ae7b --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -0,0 +1,140 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Property + - Reference + - Свойства + - Ссылки +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.globalAlpha Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.

+ +
+

Смотрите также Applying styles and color в Canvas Tutorial.

+
+ +

Синтаксис

+ +
ctx.globalAlpha = value;
+
+ +

Параметры

+ +
+
value
+
Число между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность), включительно. Дефолтное значение 1.0. Значение, не входящее в указанный диапазон, включая {{jsxref("Infinity")}} и {{jsxref("NaN")}}, не будут применены, и globalAlpha сохранит предыдущее значение или значение по-умолчанию.
+
+ +

Примеры

+ +

Отрисовка полупрозрачных фигур

+ +

В этом примере используется свойство globalAlpha для отрисовки двух полупрозрачных прямоугольников.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Drawing_translucent_shapes', 700, 180) }}

+ +

Наложение прозрачных фигур

+ +

Этот пример демонстрирует эффект наложения нескольних прозрачных фигур друг на друга. Мы начнем с отрисовки непрозрачного фона, состоящего из четырех разноцветных квадратов. Далее мы устанавливаем свойство globalAlpha равное 0.2 (20% прозрачности); Уровень прозрачности будет применен ко всем прозрачным фигурам. Затем мы используем цикл for для отрисовки нескольких кругов с увеличивающимися радиусами.

+ +

Для каждого нового круга прозрачность кругов, находящихся под ним,  уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисуем фон
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Устанавливаем уровень прозрачности
+ctx.globalAlpha = 0.2;
+
+// Рисуем круги
+for (let i = 0; i < 7; i++) {
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+
+ +

{{EmbedLiveSample("Overlaying_transparent_shapes", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}

+ +

Gecko-specific notes

+ + + + + + + +

Читайте также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/index.html b/files/ru/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..a683704e3a --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,449 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +

Интерфейс CanvasRenderingContext2D предоставляет контекст 2D рендеринга для поверхности рисования элемента {{ HTMLElement("canvas") }}.

+ +

Для того, чтобы получить объект этого интерфейса, следует вызвать метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} объекта <canvas>, передав ему в качестве первого аргумента строку "2d":

+ +
var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+
+ +

После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:

+ +
ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+
+ +

Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в руководстве по canvas содержится больше информации, примеров и ссылок на ресурсы по этой теме.

+ +

Рисование прямоугольников

+ +

Существует три метода, которые сразу же рисуют прямоугольники на холсте.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Для всех пикселей, находящихся внутри прямоугольника, определенного начальной точкой (x, y) и размерами (ширина, высота), устанавливает черный прозрачный цвет, стирая любое ранее нарисованное содержимое.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Рисует залитый прямоугольник в позиции (x, y), размеры которого определяются шириной width и высотой height.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Рисует на холсте прямоугольник с начальной точкой в позиции (x, y), имеющий ширину w и высоту h, используя текущий стиль обводки.
+
+ +

Рисование текста

+ +

Следующие методы позволяют создать текст. Смотрите так же информацию об объекте {{domxref("TextMetrics")}}, хранящем свойства текста.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Рисует (заливает) заданный текст в заданной позиции (x,y).
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Рисует обводку заданного текста в заданной позиции (x, y).
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Возвращает объект {{domxref("TextMetrics")}}.
+
+ +

Стили линий

+ +

Следующие методы и свойства определяют как будут отрисовываться линии.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Ширина линий. По умолчанию 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Форма концов линий. Возможные значения: butt (по умолчанию), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Определяет форму вершин, в которых две линии сходятся. Возможные значения: round, bevel, miter (по умолчанию).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Ограничение длины сопряжений. По умолчанию 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из четного количества неотрицательных чисел.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Устанавливает текущий паттерн штриховой линии.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Указывает с какого места начать штриховку линии.
+
+ +

Стили текста

+ +

Следующие свойства контролируют отображение текста.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Настройки шрифта. Значение по умолчанию: 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Определяет выравнивание текста по горизонтали. Возможные значения: start (по умолчанию), end, left, right или center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Определяет выравнивание текста относительно базовой линии. Возможные значения: top, hanging, middle, alphabetic (по умолчанию), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Направление текста. Возможные значения: ltr, rtl, inherit (по умолчанию).
+
+ +

Стили заливки и обводки

+ +

Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Цвет или стиль применяемый внутри форм. По умолчанию #000 (черный).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (черный).
+
+ +

Градиенты и шаблоны

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Создает линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Создает радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Создает шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.
+
+ +

Тени

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Устанавливает эффект размытия. По умолчанию 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Цвет тени. По умолчанию полностью прозрачный черный.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Горизонтальное смещение тени. По умолчанию 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Вертикальное смещение тени. По умолчанию 0.
+
+ +

Контуры

+ +

Следующие методы могут быть использованы для манипулирования контурами объектов.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Создает новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Перемещает начальную точку нового фрагмента контура в точку с координатами (x, y).
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Соединяет последнюю точку фрагмента контура и точку с координатами (x,y) прямой линией .
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Добавляет квадратичную кривую Безье к текущему контуру.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Добавляет к контуру дугу, с центром в точке (x, y), радиусом r, имеющую угол начала startAngle и конца endAngle, рисующуюся в направлении, заданном в аргументе anticlockwise (по умолчанию - по часовой стрелке).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Добавляет к контуру дугу, заданную контрольными точками и радиусом, соединяющуюся с предыдущей точкой прямой линией.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Добавляет к контуру эллипс, с центром в точке (x, y), заданный радиусами radiusX и radiusY, имеющий угол начала startAngle и конца endAngle, рисующийся в направлении, заданном в аргументе anticlockwise (по умолчанию - по часовой стрелке).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Создает контур прямоугольника с началом в точке (x, y), и размерами, заданными шириной width и высотой height.
+
+ +

Рисование контуров

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Заливает фрагменты контура текущей заливкой.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Выполняет обводку фрагментов контура текущей обводкой.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Прокручивает текущий или заданный контур в видимую область окна браузера.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Создает область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода clip() применяется только внутри области отсечения. Пример использования см. в разделе Области отсечения руководства по Canvas.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Позволяет узнать, содержится ли указанная точка в текущем контуре.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Позволяет узнать, находится ли указанная точка на обводке контура.
+
+ +

Трансформации

+ +

Объекты в контексте рендеринга CanvasRenderingContext2D имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов {{domxref("Path2D")}}. Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты {{domxref("SVGMatrix")}}, которые будут использоваться в будущем как замена устаревшим методам.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Текущая матрица преобразований ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Добавляет к  элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод transform() с теми же аргументами.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Переустанавливает текущую матрицу преобразований в единичную матрицу.
+
+ +

Композиция

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию 1.0 (полностью непрозначный).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
Совместно с примененным globalAlpha это свойство определяет как формы и изображения накладываются на существующее изображение.
+
+ +

Рисование изображений

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.
+
+ +

Манипулирование пикселями

+ +

См. также объект {{domxref("ImageData")}}.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Создает новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Возвращает объект {{domxref("ImageData")}}, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной sw и высотой sh, начальная точка которого находится в позиции (sx, sy).
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Переносит данные, заданные в объекте {{domxref("ImageData")}}, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы  будут только пикселы из этой области.
+
+ +

Сглаживание изображений

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Режим сглаживания изображений; если отключен, изображения не будут сглаживаться при масштабировании.
+
+ +

Состояние холста

+ +

Контекст рендеринга CanvasRenderingContext2D содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесенные в него изменения с помощью метода restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Восстанавливает состояние стилей рисования в значение, сохраненное методом save() в стек состояний последним.
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может иметь значение {{jsxref("null")}}, если она не связана с элементом {{HTMLElement("canvas")}}.
+
+ +

Области попадания

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Добавляет область попадания к холсту.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Удаляет область попадания с указанным id с холста.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Удаляет все области попадания с холста.
+
+ +

Нестандартные API

+ + + +

Большинство из этих API являются запрещенными и будут удалены в будущем.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Удаляет все настройки теней, такие как {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalAlpha")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineWidth")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineJoin")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineCap")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.miterLimit")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.strokeStyle")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.fillStyle")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.getLineDash()")}} и {{domxref("CanvasRenderingContext2D.setLineDash()")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.lineDashOffset")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает объект Canvas2DContextAttributes, который содержит аттрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и аттрибут "alpha" (true по умолчанию), показывающий используется ли прозрачность на холсте.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
По аналогии с аналогичным методом класса WebGLRenderingContext, возвращает true если контекст canvas был потерян, иначе false.
+
+ +

Только WebKit

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
Размер хранилища по отношению к элементу canvas. Смотри High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Предназначался для HD хранилищ, но удален из спецификации canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Предназначался для HD хранилищ, но удален из спецификации canvas.
+
+ +
+
+ +

Только Gecko

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
CпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome("1")}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Примечания о совместимости

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e4d59a184d --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,132 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineCap предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. 

+ +
+

Примечание: Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.

+
+ +

Синтаксис

+ +
ctx.lineCap = "butt" || "round" || "square";
+ +

Параметры

+ +
+
butt
+
Концы линий прямые.
+
round
+
Концы линий скругленные.
+
square
+
Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.
+
+ +

Примеры

+ +

Использование свойства lineCap

+ +

Ниже представлен простой фрагмент кода, использующий lineCap.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}

+ +

Разница между значениями lineCap

+ +

В примере нарисованы три линии с разными значениями lineCap. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.

+ +

Левая линия будет использовать значение lineCap "butt". Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap "round". За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение "square". Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+ +

{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}}
+ +

Совместиммоссть с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html new file mode 100644 index 0000000000..ec4db4e6e2 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html @@ -0,0 +1,149 @@ +--- +title: CanvasRenderingContext2D.lineDashOffset +slug: Web/API/CanvasRenderingContext2D/lineDashOffset +tags: + - API + - Canvas + - CanvasRenderingContext2D + - JavaScript + - Property + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset +--- +
{{APIRef}}
+ +
+ +

Свойство CanvasRenderingContext2D.lineDashOffset в Canvas 2D API устанавливает смещение штрихов, или «фаза».

+ +
+

Примечание: Линии нарисованы вызовом метода  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.

+
+ +

Синтаксис

+ +
ctx.lineDashOffset = value;
+
+ +
+
value
+
Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.
+
+ +

Примеры

+ +

Смещение штрихов

+ +

Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([4, 16]);
+
+// Пунктирная линия без смещения
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Пунктирная линия со смещением 4
+ctx.beginPath();
+ctx.strokeStyle = 'red';
+ctx.lineDashOffset = 4;
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+
+ +

Результат

+ +

Линия со смещением будет нарисована красным цветом.

+ +

{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}

+ +

Эффект марширующих муравьев

+ +

Эффект марширующих муравьев - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let offset = 0;
+
+const draw = () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+const march = () => {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+
+ +

{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}

+ +

Специфичные для Gecko заметки

+ + + +

Специфичные для WebKit заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html new file mode 100644 index 0000000000..afdeff96d3 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -0,0 +1,143 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineJoin предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.

+ +

См. также главу Applying styles and color в Canvas Tutorial.

+ +
+

Note: Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.

+
+ +

Синтаксис

+ +
ctx.lineJoin = "bevel" || "round" || "miter";
+ +

Значения

+ +

Свойство может принимать три значения: round, bevel и miter. По умолчанию установленно значение miter. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.

+ +

+ +
+
round
+
Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.
+
bevel
+
"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.
+
miter
+
Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}.
+
+ +

Примеры

+ +

Использование свойства lineJoin

+ +

Ниже представлен простой фрагмент кода, использующий lineJoin для скругления места соединения линий.

+ +

 

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

+ +

 

+ +

Разница между значениями lineJoin

+ +

Пример ниже наглядно демонстрирует разницу между значениями свойства lineJoin.

+ +

 

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i < lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}
+ +

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

 

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с брузерами

+ +

 

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

+ +

 

+ + + + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html new file mode 100644 index 0000000000..b09732cc5e --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html @@ -0,0 +1,116 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +
{{APIRef}}
+ +

lineTo() - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с короординатами (x, y).

+ +

Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоствляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.

+ +

Синтаксис

+ +
ctx.lineTo(x, y);
+
+ +

Параметры

+ +
+
x
+
OX значение конца линии.
+
y
+
OY значение конца линии.
+
+ +

Возвращаемое значение

+ +

{{jsxref("undefined")}}.

+ +

Примеры

+ +

Рисование прямых линий

+ +

Этот пример рисует прямую линию используя метод lineTo().

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();       // Начинает новый путь
+ctx.moveTo(30, 50);    // Рередвигает перо в точку (30, 50)
+ctx.lineTo(150, 100);  // Рисует линию до точки (150, 100)
+ctx.stroke();          // Отображает путь
+ +

Результат

+ +

{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}

+ +

Рисование соединенных линий

+ +

Каждый вызов lineTo() автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.moveTo(90, 130);
+ctx.lineTo(95, 25);
+ctx.lineTo(150, 80);
+ctx.lineTo(205, 25);
+ctx.lineTo(210, 130);
+ctx.lineWidth = 15;
+ctx.stroke();
+ +

Результаты

+ +

{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineTo")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html new file mode 100644 index 0000000000..e16000bc2d --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.lineWidth +slug: Web/API/CanvasRenderingContext2D/lineWidth +translation_of: Web/API/CanvasRenderingContext2D/lineWidth +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineWidth, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.

+ +

См. также главу  Applying styles and color в Canvas Tutorial.

+ +

Синтаксис

+ +
ctx.lineWidth = value;
+ +

Значения

+ +
+
value
+
Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.
+
+ +

Примеры

+ +

Использование свойства lineWidth

+ +

Ниже представлен простой фрагмент кода, использующий lineWidth.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозожностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ + + + + +

Особенности Gecko

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html new file mode 100644 index 0000000000..20efc3672c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -0,0 +1,69 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.measureText(), предоставляемый Canvas 2D API, возвращает объект {{domxref("TextMetrics")}}, содержащий информацию об измеренном тексте (например, ширину).

+ +

Синтаксис

+ +
ctx.measureText(text);
+ +

Параметры

+ +
+
text
+
Строка {{jsxref("String")}} для измерения.
+
+ +

Возвращаемое значение

+ +

Объект {{domxref("TextMetrics")}}.

+ +

Примеры

+ +

Используя элемент {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

... вы можете получить объект {{domxref("TextMetrics")}}, используя следующий код:

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

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.measureText")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html new file mode 100644 index 0000000000..f22e392449 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html @@ -0,0 +1,118 @@ +--- +title: CanvasRenderingContext2D.miterLimit +slug: Web/API/CanvasRenderingContext2D/miterLimit +translation_of: Web/API/CanvasRenderingContext2D/miterLimit +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.miterLimit устанавливает/возвращает максимальную длину среза.

+ +

Длина среза это расстояние между внутренним и внешнем углом, образованным пересечением двух линий.

+ +
+

For more info about miters, see Applying styles and color in the Canvas tutorial.

+
+ +

Синтаксис

+ +
ctx.miterLimit = число;
+ +

Options

+ +
+
число
+
Положительное число, определяющее максимальную длину среза. Если текущая длина среза будет превышать заданное значение, то угол будет отображаться как при значении bevel свойства lineJoin.
+
+ +

Примеры

+ +

Using the miterLimit property

+ +

See the chapter Applying styles and color in the Canvas tutorial for more information.

+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.CanvasRenderingContext2D.miterLimit")}}

+ + + + + +

Gecko-specific notes

+ + + +

See also

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html new file mode 100644 index 0000000000..e0ea2d18b0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html @@ -0,0 +1,172 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.moveTo(), предоставляемый Canvas 2D API, перемещает начальную точку нового фрагмента контура в координаты (x, y).

+ +

Синтаксис

+ +
void ctx.moveTo(x, y);
+
+ +

Параметры

+ +
+
x
+
Координата точки по оси x.
+
y
+
Координата точки по оси y.
+
+ +

Примеры

+ +

Использование метода moveTo

+ +

Ниже представлен простой фрагмент кода, использующий метод moveTo для того, чтобы переместить указатель в начальную позицию для рисования линии.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html new file mode 100644 index 0000000000..a37cdc3479 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.putImageData() +slug: Web/API/CanvasRenderingContext2D/putImageData +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/putImageData +--- +
{{APIRef}}
+ +
+ +

CanvasRenderingContext2D.putImageData() метод Canvas 2D API рисует данные из заданного {{domxref("ImageData")}} объекта на холст. На этот метод не влияет матрица преобразования холста.

+ +
+

Примечание: Данные изображения могут быть получены с холста с помощью метода {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}}.

+
+ +

Вы можете найти больше информации о putImageData() и общих манипуляциях с содержимым холста в статье Пиксельные манипуляции с холстом.

+ +

Синтаксис

+ +
void ctx.putImageData(imageData, dx, dy);
+void ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
+
+ +

Параметры

+ +
+
imageData
+
Объект {{domxref("ImageData")}}, содержащий массив значений пикселей..
+
dx
+
Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.
+
dy
+
Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.
+
dirtyX{{optional_inline}}
+
Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.
+
dirtyY {{optional_inline}}
+
Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.
+
dirtyWidth {{optional_inline}}
+
Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.
+
dirtyHeight {{optional_inline}}
+
Высота прямоугольника для рисования. По умолчанию высота данных изображения.
+
+ +

Ошибки

+ +
+
NotSupportedError
+
Выбрасывается, если любой из аргументов бесконечен.
+
InvalidStateError
+
Выбрасывается, если данные объекта ImageData были отделены.
+
+ +

Примеры

+ +

Понимание putImageData

+ +

Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
let canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+
+function putImageData(ctx, imageData, dx, dy,
+    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
+  let data = imageData.data;
+  let height = imageData.height;
+  let width = imageData.width;
+  dirtyX = dirtyX || 0;
+  dirtyY = dirtyY || 0;
+  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
+  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
+  let limitBottom = dirtyY + dirtyHeight;
+  let limitRight = dirtyX + dirtyWidth;
+  for (let y = dirtyY; y < limitBottom; y++) {
+    for (let x = dirtyX; x < limitRight; x++) {
+      var pos = y * width + x;
+      ctx.fillStyle = 'rgba(' + data[pos*4+0]
+                        + ',' + data[pos*4+1]
+                        + ',' + data[pos*4+2]
+                        + ',' + (data[pos*4+3]/255) + ')';
+      ctx.fillRect(x + dx, y + dy, 1, 1);
+    }
+  }
+}
+
+// Нарисуйте контент на холсте
+ctx.fillRect(0, 0, 100, 100);
+// Создайте объект ImageData из него
+let imagedata = ctx.getImageData(0, 0, 100, 100);
+// используйте функцию putImageData, которая иллюстрирует, как работает putImageData
+putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Понимание_putImageData', '', '', '', 'Web/API/CanvasRenderingContext2D/putImageData',800) }}

+ +

Потеря данных из-за оптимизации браузера

+ +
+

 Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью putImageData(), могут быть возвращены в эквивалентный getImageData() в качестве различных значений.

+
+ +

JavaScript

+ +
const canvas = document.createElement("canvas");
+canvas.width = 1;
+canvas.height = 1;
+const context = canvas.getContext("2d");
+const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels = imgData.data;
+
+pixels[0 + 0] = 1;
+pixels[0 + 1] = 127;
+pixels[0 + 2] = 255;
+pixels[0 + 3] = 1;
+
+console.log("before:", pixels);
+context.putImageData(imgData, 0, 0);
+const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels2 = imgData2.data;
+console.log("after:", pixels2);
+ +

Вывод может выглядеть так:

+ +
before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
+after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузера

+ + + +

{{Compat("api.CanvasRenderingContext2D.putImageData")}}

+ +

Специфичные для Gecko заметки

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html new file mode 100644 index 0000000000..d5b1d4415f --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.rect(), предоставляемый Canvas 2D API, создает контур прямоугольника в позиции (x, y), размеры которого устанавливаются аргументами width и height. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.

+ +

Синтаксис

+ +
void ctx.rect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода rect

+ +

Ниже представлен простой фрагмент кода, использующий метод rect для создания контура. Для того чтобы нарисовать контур на холсте вы можете воспользоваться методами {{domxref("CanvasRenderingContext2D.fill", "fill()")}} или {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Обратите внимание так же на методы {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} и {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} которые могут сделать тоже самое за один раз .

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.fill();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/restore/index.html b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html new file mode 100644 index 0000000000..33feac8b7e --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html @@ -0,0 +1,76 @@ +--- +title: CanvasRenderingContext2D.restore() +slug: Web/API/CanvasRenderingContext2D/restore +translation_of: Web/API/CanvasRenderingContext2D/restore +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.restore() восстанавливает предварительно сохраненное состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.

+ +

Fore more information about the drawing state, see {{domxref("CanvasRenderingContext2D.save()")}}.

+ +

Синтаксис

+ +
void ctx.restore();
+ +

Пример

+ +

Restoring a saved state

+ +

This example uses the save() method to save the default state and restore() to restore it later, so that you are able to draw a rect with the default state later.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Save the default state
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restore the default state
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Restoring_a_saved_state', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.restore")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html new file mode 100644 index 0000000000..ea206a5d1f --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html @@ -0,0 +1,120 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +
{{APIRef}}
+ +
Метод CanvasRenderingContext2D.rotate() из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.
+ +

Syntax

+ +
void ctx.rotate(angle);
+
+ +

+ +

Parameters

+ +
+
angle
+
Угол поворота по часовой стрелке, в радианах. Вы также можете использовать degree * Math.PI / 180 если вы хотите использовать для угла значение градуса (degree).
+
+ +

Центром вращения всегда является начало холста. Для изменения центра вращения, нам необходимо передвинуть холст, используя метод {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

+ +

Примеры

+ +

Использование метода rotate

+ +

Ниже приведен простой пример кода, который использует метод rotate.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70,0,100,30);
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.rotate")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/save/index.html b/files/ru/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..8716b6487c --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,84 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.save() - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.

+ +

Состояние чертежа

+ +

Состояние чертежа, которое сохраняется в стеке, состоит из:

+ + + +

Синтаксис

+ +
void ctx.save();
+ +

Пример

+ +

Сохранение состояния чертежа

+ +

Этот пример использует метод save() для сохранения состояния по умолчанию, и метод restore() для восстановления состояния позже, чтобы позже можно было нарисовать прямоугольник с состоянием по умолчанию.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Сохранение состояния по умолчанию
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Восстановление состояния по умолчанию
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+ +

Результат

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.save")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html new file mode 100644 index 0000000000..1ac7882a57 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html @@ -0,0 +1,116 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.stroke() Canvas 2D API обводит текущий или данный контур цветом strokeStyle.

+ +

Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.

+ +

Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.

+ +

Синтаксис

+ +
void ctx.stroke();
+void ctx.stroke(path);
+
+ +

Параметры

+ +
+
path
+
{{domxref ("Path2D")}} - контур, который нужно обвести.
+
+ +

Примеры

+ +

Использование метода stroke()

+ +

В этом примере с помощью метода rect() создается прямоугольник, и затем с помощью stroke() отрисовывается на холсте.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузеров

+ + + +

{{Compat("api.CanvasRenderingContext2D.stroke")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html new file mode 100644 index 0000000000..e211be454f --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.strokeRect(), предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами (x, y), а так же ширину w и высоту h, используя текущий стиль линий.

+ +

Синтаксис

+ +
void ctx.strokeRect(x, y, width, height);
+
+ +

Параметры

+ +
+
x
+
Координата начальной точки прямоугольника по оси x.
+
y
+
Координата начальной точки прямоугольника по оси y.
+
width
+
Ширина прямоугольника.
+
height
+
Высота прямоугольника.
+
+ +

Примеры

+ +

Использование метода strokeRect

+ +

Ниже представлен простой фрагмент кода, использующий метод strokeRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html new file mode 100644 index 0000000000..eff9c60020 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -0,0 +1,205 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.strokeStyle, предоставляемое Canvas 2D API задает цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение #000 (черный цвет).

+ +

См. также главу Applying styles and color в Canvas Tutorial.

+ +

Синтаксис

+ +
ctx.strokeStyle = color;
+ctx.strokeStyle = gradient;
+ctx.strokeStyle = pattern;
+
+ +

Значения

+ +
+
color
+
{{domxref("DOMString")}} строка содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).
+
gradient
+
Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).
+
pattern
+
Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).
+
+ +

Примеры

+ +

Использование strokeStyle с цветом

+ +

Ниже представлен простой фрагмент кода, использующий strokeStyle с цветом.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Использование strokeStyle в циклах for

+ +

В этом примере свойство strokeStyle используется для рисования границ фигур. Мы используем метод {{domxref("CanvasRenderingContext2D.arc", "arc()")}} для рисования кругов.

+ +
var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                      Math.floor(255-42.5*j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+    ctx.stroke();
+  }
+}
+
+ + + +

Результат выглядит так:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html new file mode 100644 index 0000000000..e0e98fbc0a --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +
{{APIRef}}
+ +

Метод CanvasRenderingContext2D.strokeText(), предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (x, y). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.

+ +

См. также метод {{domxref("CanvasRenderingContext2D.fillText()")}} для заливки контуров текста.

+ +

Синтаксис

+ +
void ctx.strokeText(text, x, y [, maxWidth]);
+
+ +

Параметры

+ +
+
text
+
Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
x
+
Коодрдината левой нижней точки текста по оси x.
+
y
+
Коодрдината левой нижней точки текста по оси y.
+
maxWidth {{optional_inline}}
+
Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.
+
+ +

Примеры

+ +

Использование метода strokeText

+ +

Ниже представлен простой фрагмент кода, использующий strokeText.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+
+ +

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE(9) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..306558fa51 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +tags: + - API + - Canvas + - Выравнивание + - Значение + - Текст +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.textAlign Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}}. Так что, если значение textAlign равно "center", то текст будет прорисован в x - (width / 2).

+ +

Синтаксис

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

Параметры

+ +
+
left
+
Выравнивание текста по левому краю.
+
right
+
Выравнивание текста по правому краю.
+
center
+
Текст отцентрирован.
+
start
+
Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).
+
end
+
Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево
+
+ +

По умолчанию значение textAlign установлено как "start".

+ +

Примеры

+ +

Использование значения textAlign

+ +

Довольно простой сниппет использования значения textAlign для изменения выравнивания текста.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html new file mode 100644 index 0000000000..545cf211b5 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -0,0 +1,100 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.textBaseline - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.

+ +

Синтаксис

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

Опции

+ +

Возможные значения:

+ +
+
"top"
+
The text baseline is the top of the em square.
+
"hanging"
+
The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)
+
"middle"
+
The text baseline is the middle of the em square.
+
"alphabetic"
+
The text baseline is the normal alphabetic baseline. Значение по умолчанию.
+
"ideographic"
+
The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)
+
"bottom"
+
The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.
+
+ +

Примеры

+ +

Сравнение значений свойства

+ +

Этот пример демонстрирует различные значения свойства textBaseline и отображение линий при их приминениях.

+ +

HTML

+ +
<canvas id="canvas" width="550" height="500"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
+ctx.font = '36px serif';
+ctx.strokeStyle = 'red';
+
+baselines.forEach(function (baseline, index) {
+  ctx.textBaseline = baseline;
+  let y = 75 + index * 75;
+  ctx.beginPath();
+  ctx.moveTo(0, y + 0.5);
+  ctx.lineTo(550, y + 0.5);
+  ctx.stroke();
+  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
+});
+
+ +

Результат

+ +

{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf