diff options
Diffstat (limited to 'files/ru/web/api/canvasrenderingcontext2d')
39 files changed, 5916 insertions, 0 deletions
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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> метод Canvas 2D API добавляет дугу к пути с центром <em>(x, y)</em> и с радиусом <em>r</em> с началом в <em>startAngle</em> и с концом <em>endAngle</em> и с направлением против часовой стрелки (по умолчанию по часовой стрелке).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle, anticlockwise);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>X координата центра дуги.</dd> + <dt><code>y</code></dt> + <dd>Y координата центра дуги.</dd> + <dt><code>radius</code></dt> + <dd>Радиус.</dd> + <dt><code>startAngle</code></dt> + <dd>Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd> + <dt><code>endAngle</code></dt> + <dd>Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd> + <dt><code>anticlockwise</code> {{optional_inline}}</dt> + <dd>Необязательный {{jsxref("Boolean")}}. Задаёт направление рисования дуги.<br> + Если <code>true</code> - против часовой, <code>false</code> - по часовой.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_arc_method" name="Using_the_arc_method">Использование метода <code>arc</code></h3> + +<p>Ниже приведен пример простого кода который рисует круг.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.arc(75, 75, 50, 0, 2 * Math.PI); +ctx.stroke(); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Демонстрация разных форм дуг</h3> + +<p>В этом примере нарисованные разные формы чтобы показать возможности метода <code>arc()</code>.</p> + +<div style="display: none;"> +<h6 id="HTML_2">HTML</h6> + +<pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas> +</pre> + +<h6 id="JavaScript_2">JavaScript</h6> +</div> + +<pre class="brush: js">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(); + } + } +}</pre> + +<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Примечания_относительно_Gecko">Примечания относительно Gecko</h2> + +<p>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}:</p> + +<ul> + <li><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Параметр </span></font><code>anticlockwise</code> опциональный,</li> + <li>Указывание отрицательного радиуса теперь приводит к ошибке {{domxref("DOMError", "IndexSizeError")}} error ("Index or size is negative or greater than the allowed amount").</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс <code>Canvas</code>, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>В Canvas 2D API есть метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong>. Он добавляет дугу к контуру (path) с заданными контрольными точками и радиусом, соединяя их прямой линией с предыдущей точкой контура.</p> + +<p>Обычно метод используется для скругления углов.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Помните, что вы можете получить неожиданный результат при использовании большого радиуса: соединтельная линия дуги будет идти в любом направлении, в котором она должна соответствовать указанному радиусу.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>x1</code></dt> + <dd>Координата <u>x</u> первой контрольной точки.</dd> + <dt><code>y1</code></dt> + <dd>Координата <u>y</u> первой контрольной точки.</dd> + <dt><code>x2</code></dt> + <dd>Координата <u>x</u> второй контрольной точки.</dd> + <dt><code>y2</code></dt> + <dd>Координата <u>y</u> второй контрольной точки.</dd> + <dt><code>radius</code></dt> + <dd>Радиус дуги. Не может быть отрицательным.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Как_работает_arcTo">Как работает arcTo</h3> + +<p>Один из способов понять как работает <code>arcTo()</code> - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без <code>arcTo()</code> эти два сегмента образовали бы остый угол: <code>arcTo()</code> cоздаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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();</pre> + +<h4 id="Результат">Результат</h4> + +<p>В этом примере контур, созданный с помощью <code>arcTo()</code> <strong>жирный и чёрный</strong>. <span style="color: gray;">Касательная линия серия</span>, <span style="color: red;">контрольные точки красные</span>, а <span style="color: blue;">начальная точка синяя</span>. </p> + +<p>{{ EmbedLiveSample('Как_работает_arcTo', 315, 165) }}</p> + +<h3 id="Создание_скругленного_угла">Создание скругленного угла</h3> + +<p>В этом примере создаётся скруглённый угол с использованием <code>arcTo()</code>. Это ещё один метод, который часто используется.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>Дуга начинается в точке, заданной в <code>moveTo()</code>: (230, 20). Она сформирована так, чтобы соответствовать точкам на (90, 130) и (20, 20) с радиусом 50. Метод <code>lineTo()</code> соединяет дугу с (20, 20) прямой линией. Заметьте, что вторая контрольная точка дуги и точка, заданная в <code>lineTo()</code> одинаковые, что создаёт абсолютно гладкий угол.</p> + +<pre class="brush: js">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();</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{ EmbedLiveSample('Создание_скругленного_угла', 315, 165) }}</p> + +<h3 id="Результат_с_большим_радиусом">Результат с большим радиусом</h3> + +<p>Если вы используете относительно большой радиус, дуга может появиться в том месте, где вы её не ожидаете. В данном примере соединительная линия дуги идёт вверху, а не внизу. Это происходит потому что радиус слишком большой, чтобы уместить дугу между точками.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js">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();</pre> + +<h4 id="Результат_3">Результат</h4> + +<p>{{ EmbedLiveSample('Результат_с_большим_радиусом', 315, 165) }}</p> + +<h3 id="Живая_демонстрация">Живая демонстрация</h3> + +<p>Более сложная демонстрация метода. Вы можете поиграть с диапазоном ввода, чтобы увидеть, как изменяется дуга.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="JavaScript_4">JavaScript</h4> + +<pre class="brush: js">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);</pre> + +<h4 id="Результат_4">Результат</h4> + +<p>{{EmbedLiveSample('Живая_демонстрация', 315, 200) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент определяющий этот метод, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D.beginPath()</strong></code> Canvas 2D API запускает новый путь, опуская список подпутей. Вызовите этот метод, когда хотите создать новый путь.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var> +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_beginPath_метода">Использование <code>beginPath</code> метода</h3> + +<p>Это простой фрагмент кода, использующий <code>beginPath</code> метод.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5,12]">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(); +</pre> + +<p>Отредактируйте код ниже чтобы увидеть изменения в canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий это, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">Сводка</h2> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong>, предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} перед созданием кривой Безье.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</var> +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>cp1x</code></dt> + <dd>Координата первой контрольной точки по оси x.</dd> + <dt><code>cp1y</code></dt> + <dd>Координата первой контрольной точки по оси y.</dd> + <dt><code>cp2x</code></dt> + <dd>Координата второй контрольной точки по оси x.</dd> + <dt><code>cp2y</code></dt> + <dd>Координата второй контрольной точки по оси y.</dd> + <dt><code>x</code></dt> + <dd>Координата конечной точки по оси x.</dd> + <dt><code>y</code></dt> + <dd>Координата конечной точки по оси y.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метода_bezierCurveTo">Использование метода <code>bezierCurveTo</code></h3> + +<p>Ниже представлен простой фрагмент кода, рисующий кривую Безье. <span style="color: red;">Контрольные точки нарисованы красным цветом</span>, а <span style="color: blue;">начальная и конечная точки - синим</span>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">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);</pre> + +<p>{{ EmbedLiveSample('Использование_метода_bezierCurveTo', 315, 165) }}</p> + +<h3 id="Практическое_применение_bezierCurveTo">Практическое применение <code>bezierCurveTo</code></h3> + +<p>Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Практическое_применение_bezierCurveTo', 700, 360) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li><a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%B2%D0%B0%D1%8F_%D0%91%D0%B5%D0%B7%D1%8C%D0%B5">Статья в Википедии про кривые Безье</a>.</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D.canvas</strong></code> является доступной только для чтения ссылкой на объект {{domxref("HTMLCanvasElement")}}, связанный с текущим контекстом. Может иметь значение {{jsxref("null")}}, если контекст не связан с элементом {{HTMLElement("canvas")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + +<h2 id="Примеры">Примеры</h2> + +<p>Создадим элемент {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>Вы можете получить ссылку на этот элемент из объекта <code>CanvasRenderingContext2D,</code> используя свойство <code>canvas</code>:</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.canvas // HTMLCanvasElement +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p> </p> + +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> + +<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong>, предоставляемый Canvas 2D API, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой <em>(x, y)</em> и размерами <em>(width, height)</em>, таким образом стирая любое ранее нарисованное содержимое.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var> +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Координата начальной точки прямоугольника по оси x.</dd> + <dt><code>y</code></dt> + <dd>Координата начальной точки прямоугольника по оси y.</dd> + <dt><code>width</code></dt> + <dd>Ширина прямоугольника.</dd> + <dt><code>height</code></dt> + <dd>Высота прямоугольника.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метода_clearRect">Использование метода <code>clearRect</code></h3> + +<p>Ниже представлен простой фрагмент кода, использующий метод <code>clearRect</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[11]">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); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.</p> + +<p>Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} и {{domxref("CanvasRenderingContext2D.fill()", "fill()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <em>ctx</em>.closePath(); +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Замкнутый_треугольник">Замкнутый треугольник</h3> + +<p>В этом примере создаются две первые линии сторон треугольника с испоьзованием метода <code>lineTo()</code>. После чего метод <code>closePath()</code> заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).</p> + +<pre class="brush: js; highlight:[8]">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(); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}</p> + +<h3 id="Закрытие_пути_один_раз">Закрытие пути один раз</h3> + +<p>Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).</p> + +<div class="blockIndicator note"> +<p>Хотя <code>closePath()</code> вызывается после создания всех дуг, закрывается только последняя.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>Первые две дуги создают глаза, последняя создает рот.</p> + +<pre class="brush: js; highlight:[10]">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(); +</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>, предоставляемый Canvas 2D API, создает градиент вдоль линии, соединенной двумя точками с заданными координатами.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p> + +<p>Этот метод возвращает линейный {{domxref("CanvasGradient")}}. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.</p> + +<div class="note"> +<p><strong>Заметка:</strong> Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>); +</pre> + +<p>Метод <code>createLinearGradient()</code> принимает четыре аргумента для определения начала и конца точек линии градиента.</p> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>x0</code></dt> + <dd>Координата по оси X начальной точки.</dd> + <dt><code>y0</code></dt> + <dd>Координата по оси Y начальной точки.</dd> + <dt><code>x1</code></dt> + <dd>Координата по оси X конечной точки.</dd> + <dt><code>y1</code></dt> + <dd>Координата по оси Y конечной точки.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<dl> + <dt>{{domxref("CanvasGradient")}}</dt> + <dd>Линейный <code>CanvasGradient</code>, определенный линией.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Заполнение_прямоугольника_с_линейным_градиентом">Заполнение прямоугольника с линейным градиентом</h3> + +<p>В примере создается и добавляется линейный градиент, используя метод <code>createLinearGradient()</code>. Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[7] notranslate">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); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Заполнение_прямоугольника_с_линейным_градиентом', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p> + +<h3 id="Специфично_для_Gecko">Специфично для Gecko</h3> + +<ul> + <li>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, указание не конечных значений выбрасывает <code>NOT_SUPPORTED_ERR</code> вместо <code>SYNTAX_ERR</code>.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> +</ul> 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 +--- +<div>{{APIRef()}} {{SeeCompatTable}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.currentTransform</code></strong>, предоставляемое Canvas 2D API, возвращает или устанавливает объект {{domxref("SVGMatrix")}} для текущей матрицы преобразований.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>ctx.currentTransform [= value];</var> +</pre> + +<dl> + <dt><code>value</code></dt> + <dd>Объект {{domxref("SVGMatrix")}}, который будет использован в роли текущей матрицы преобразований.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_метода_currentTransform">Использование метода <code>currentTransform</code></h3> + +<p>Ниже представлен простой фрагмент кода, использующий свойство <code>currentTransform</code> для установки матрицы преобразований.</p> + +<h4 id="HTML">HTML</h4> + +<pre><code><canvas id="canvas"></canvas></code></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre><code>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);</code></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Manually_changing_the_matrix', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.currentTransform")}}</p> + +<p> </p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий его, {{domxref("CanvasPattern")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("DOMMatrix")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var> +void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var> +void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var> +</pre> + +<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>image</code></dt> + <dd>Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.</dd> + <dt><code>dx</code></dt> + <dd>Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd> + <dt><code>dy</code></dt> + <dd>Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd> + <dt><code>dWidth</code></dt> + <dd>Ширина изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.</dd> + <dt><code>dHeight</code></dt> + <dd>Высота изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.</dd> + <dt><code>sx</code></dt> + <dd>Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd> + <dt><code>sy</code></dt> + <dd>Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd> + <dt><code>sWidth</code></dt> + <dd>Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной <code>sx</code> и <code>sy</code> до правого нижнего угла источника будет целиком скопирован в контекст-приемник.</dd> + <dt><code>sHeight</code></dt> + <dd>Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.</dd> +</dl> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>INDEX_SIZE_ERR</code></dt> + <dd>Выбрасывается, если ширина или высота источника или приемника равна нулю.</dd> + <dt><code>INVALID_STATE_ERR</code></dt> + <dd>Источник не имеет данных изображения.</dd> + <dt><code>TYPE_MISMATCH_ERR</code></dt> + <dd>Тип данных источника не поддерживается.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_метода_drawImage">Использование метода <code>drawImage</code></h3> + +<p>Вот простой пример использования <code>drawImage</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">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); +</pre> + +<p>Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Понимание_размеров_изображения-источника">Понимание размеров изображения-источника</h3> + +<p>Метод <code>drawImage()</code> использует <em>внутренние размеры</em> элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).</p> + +<p>Например, если изображение было загружено с использованием необязательных параметров <code>width</code> и <code>height</code> в конструкторе {{domxref("HTMLImageElement")}}, вместо <code>element.width</code> и <code>element.height</code> вам следует использовать свойства <code>naturalWidth</code> и <code>naturalHeight</code> экземпляра картинки (или <code>videoWidth</code> и <code>videoHeight</code>, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">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); +}</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}</p> + +<p> </p> + +<h2 id="Спецификация">Спецификация</h2> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Функция</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ImageBitmap</code> как источник</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(42)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>SVGImageElement</code> как источник</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(56)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Сглаживание при сжатии</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Функция</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ImageBitmap</code> как источник</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(42)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>SVGImageElement</code> как источник</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(56)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Сглаживание при сжатии</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] См. {{bug(1360415)}}</p> + +<h2 id="Дополнительно_о_совместимости">Дополнительно о совместимости</h2> + +<ul> + <li>Поддержка переворачивания изображения с использованием отрицательных значений <code>sw</code> и <code>sh</code> была добавлена в Gecko 5.0 {{geckoRelease("5.0")}}.</li> + <li>Начиная с {{geckoRelease("5.0")}}, <code>drawImage()</code> поддерживает отрицательные значения аргументов. Таким образом, можно переворачивать изображение вокруг разных осей.</li> + <li>Начиная с {{geckoRelease("5.0")}}, передача <code>null</code> или <code>undefined</code> как источника для <code>drawImage()</code> корректно выбрасывает исключение <code>TYPE_MISMATCH_ERR</code>.</li> + <li>Вплоть до Gecko 7.0 {{ geckoRelease("7.0") }} Firefox выбрасывал исключение в случае, если какая-то из координат равнялась нулю или бесконечности. Согласно спецификации, этого больше не происходит.</li> + <li>Gecko 9.0 {{ geckoRelease("9.0") }} теперь корректно поддерживает CORS без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li> + <li>Gecko 11.0 {{ geckoRelease("11.0") }} теперь поддерживает SVG как источник для <code>drawImage()</code> без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li> +</ul> + +<h2 id="Дополнительно">Дополнительно</h2> + +<ul> + <li><code>drawImage()</code> корректно работает с {{domxref("HTMLVideoElement")}} только в том случае, когда {{domxref("HTMLMediaElement.readyState")}}<strong> больше единицы</strong> (т.е., событие <strong>seek</strong> корректно вызывается после установки свойства <code>currentTime</code>)</li> + <li><code>drawImage()</code> будет использовать внутренний размер элемента-источника, выраженный в CSS-пикселях, при рисовании, фрагментировании или масштабировании.</li> + <li><code>drawImage()</code> проигнорирует все EXIF-данные изображений, в том числе и <code>Orientation</code>. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать <code>rotate()</code> для ее корректировки.</li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Родительский интерфейс метода {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]); +</pre> + +<p><code>ellipse()</code> - метод, который создает эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идет по направлению, казанному в параметре (по часовай срелке или против нее) <code>anticlockwise</code> .</p> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Координата центра эллипса по оси x (горизонтальная).</dd> + <dt><code>y</code></dt> + <dd>Координата центра эллипса по оси y (вертикальная).</dd> + <dt><code>radiusX</code></dt> + <dd>Радиус оси x эллипса. Должен быть неотрицательным.</dd> + <dt><code>radiusY</code></dt> + <dd>Радиус оси y эллипса. Должен быть неотрицательным.</dd> + <dt><code>rotation</code></dt> + <dd>Вращение эллипса, выраженное в радианах.</dd> + <dt><code>startAngle</code></dt> + <dd>Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd> + <dt><code>endAngle</code></dt> + <dd>Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd> + <dt><code>anticlockwise</code> {{optional_inline}}</dt> + <dd>Опция {{jsxref("Boolean")}}, которая при <code>true</code>, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно <code>false</code> - рисование по часовой стрелке (clockwise).</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Рисование_полного_эллипса">Рисование полного эллипса</h3> + +<p>Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="200"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6] notranslate">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(); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}</p> + +<h3 id="Различные_эллиптические_дуги">Различные эллиптические дуги</h3> + +<p>В этом примере создаются три эллиптических контура с различными свойствами.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js; highlight:[6,11,16] notranslate">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(); +</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p> + +<h2 id="Изучите_также">Изучите также</h2> + +<ul> + <li>Интерфейс, определяющий этот метод:{{domxref("CanvasRenderingContext2D")}}</li> + <li>Используйте {{domxref("CanvasRenderingContext2D.arc()")}}, чтобы нарисовать дугу окружности</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var> +void <var><em>ctx</em>.fill(path[, fillRule]);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>fillRule</code></dt> + <dd>Выбор алгоритма заливки фигуры<br> + Возможные значения: + <ul> + <li><code><strong>"nonzero</strong></code>": <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%BE_%D0%BD%D0%B5%D0%BD%D1%83%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE_%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%D0%B0">Правило ненулевого индекса</a>, значение по умолчанию</li> + <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">Четно-нечетное правило</a></li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>{{domxref("Path2D")}} путь для заливки.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h3 id="Использование_метода_fill">Использование метода <code>fill</code></h3> + +<p>Это всего лишь простой фрагмент кода, который использует метод <code>fill</code> для заполнения пути.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Характеристика</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос, чтобы мы изменили данные.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс определяющий этот метод, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong>, предоставляемый Canvas 2D API, рисует залитый прямоугольник в позиции <em>(x, y),</em> размер которого определяется аргументами <em>width</em> и <em>height</em>, и стиль которого определяется атрибутом {{domxref("CanvasRenderingContext2D.fillStyle", "<code>fillStyle</code>")}}.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var> +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Координата начальной точки прямоугольника по оси x.</dd> + <dt><code>y</code></dt> + <dd>Координата начальной точки прямоугольника по оси y.</dd> + <dt><code>width</code></dt> + <dd>Ширина прямоугольника.</dd> + <dt><code>height</code></dt> + <dd>Высота прямоугольника.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метода_fillRect">Использование метода <code>fillRect</code></h3> + +<p>Ниже представлен простой фрагмент кода, использующий метод <code>fillRect</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">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); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong>, предосталяемое <a href="/ru/docs/Web/API/Canvas_API">Canvas 2D API</a>, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p> + +<div class="blockIndicator note"> +<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color; +</var><var><em>ctx</em>.fillStyle = gradient; +</var><var><em>ctx</em>.fillStyle = pattern;</var> +</pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code>color</code></dt> + <dd>{{domxref("DOMString")}} строка, содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).</dd> + <dt><code>gradient</code></dt> + <dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd> + <dt><code>pattern</code></dt> + <dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Изменение цвета заливки фигуры</h3> + +<p>Ниже представлен простой фрагмент кода, использующий <code>fillStyle</code> с цветом.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Изменение_цвета_заливки_фигуры', 700, 160) }}</p> + +<h3 id="Использование_fillStyle_в_циклах_for">Использование fillStyle в циклах for</h3> + +<p>В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные <code>i</code> и <code>j</code>, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">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); + } +}</pre> + +<h4 id="Результат_2">Результат:</h4> + +<p>{{EmbedLiveSample("Использование_fillStyle_в_циклах_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p> + +<p>В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод <code>ctx.setFillColor()</code> в дополнение к этому.</p> + +<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3> + +<p>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setFillColor()</code>.</p> + +<pre class="brush: js">setFillColor(color, optional alpha); +setFillColor(grayLevel, optional alpha); +setFillColor(r, g, b, a); +setFillColor(c, m, y, k, a); +</pre> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText(),</code></strong> предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.</p> + +<p>См. также метод {{domxref("CanvasRenderingContext2D.strokeText()")}} для выполнения обводки текста.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>text</code></dt> + <dd>Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> +</dl> + +<dl> + <dt><code>x</code></dt> + <dd>Коодрдината левой нижней точки текста по оси x.</dd> + <dt><code>y</code></dt> + <dd>Коодрдината левой нижней точки текста по оси y.</dd> + <dt><code>maxWidth</code> {{optional_inline}}</dt> + <dd>Максимальная ширина текста. Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_метода_fillText">Использование метода fillText</h3> + +<p>Ниже представлен простой фрагмент кода, использующий fillText.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5] notranslate">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.fillText("Hello world", 50, 100); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><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> +</pre> + +<pre class="brush: js notranslate">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"> + <p>Спецификация</p> + </th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong> – свойство<strong> </strong>Canvas 2D API, определяющее текущие стили рисуемого текста. Это строка, которая использует синтаксис <a href="/en-US/docs/Web/CSS/font" title="en/CSS/font">CSS font</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.font = <em>value</em>; +</pre> + +<h3 id="Опции">Опции</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Строка {{domxref("DOMString")}} с разобранным CSS {{cssxref("font")}} значением. Значение по-умолчанию – "10px sans-serif".</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_пользовательского_шрифта">Использование пользовательского шрифта</h3> + +<p>Этот пример задает в своействе <code>font</code> другие <code>font-size</code> и <code>font-family</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.font = 'bold 48px serif'; +ctx.strokeText('Hello world', 50, 100); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Использование_пользовательского_шрифта', 700, 180) }}</p> + +<h3 id="Загрузка_шрифта_с_помощью_CSS_Font_Loading_API">Загрузка шрифта с помощью CSS Font Loading API</h3> + +<p>С помощью {{domxref("FontFace")}} API, вы можете явно загрузить шрифт перед использованием его в <code>canvas</code>.</p> + +<pre class="brush: js">let f = new FontFace('test', 'url(x)'); + +f.load().then(function() { + // Ready to use the font in a canvas context +});</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p> + +<h3 id="Особенности_Gecko">Особенности Gecko</h3> + +<ul> + <li>Браузеры на основе Gecko, например Firefox, имеют не стандандартное и устаревшее свойство <code>ctx.mozTextStyle</code>. Используйте <code>ctx.font</code> вместо него.</li> + <li>In Gecko, when setting a system font as the value of a canvas 2D context's {{domxref("CanvasRenderingContext2D.font", "font")}} (e.g., <code>menu</code>), getting the font value used to fail to return the expected font (it returns nothing). This is fixed in Firefox's <a href="https://wiki.mozilla.org/Quantum/Stylo">Quantum/Stylo</a> parallel CSS engine, released in Firefox 57 ({{bug(1374885)}}).</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData() </code></strong><code>-</code> метод Canvas 2D API, возвращает объект {{domxref("ImageData")}}, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке <em>(sx, sy)</em> и имеет ширину <em>sw</em> и высоту <em>sh</em>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>sx</code></dt> + <dd>Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd> + <dt><code>sy</code></dt> + <dd>Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd> + <dt><code>sw</code></dt> + <dd>Ширина прямоугольника, из которого будет извлечен ImageData.</dd> + <dt><code>sh</code></dt> + <dd>Высота прямоугольника, из которого будет извлечен ImageData.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Объект {{domxref("ImageData")}}, содержащий данные изображения для данного прямоугольника холста.</p> + +<h3 id="Выбрасываемые_ошибки">Выбрасываемые ошибки</h3> + +<dl> + <dt><code>IndexSizeError</code></dt> + <dd>Выбрасывает, если аргумент высоты или ширины равен нулю.</dd> + <dt><code>SecurityError</code></dt> + <dd>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 <code>SecurityError</code> being thrown in this situation, configure CORS to allow the source image to be used in this way. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">Allowing cross-origin use of images and canvas</a>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p> </p> + +<h3 id="Getting_image_data_from_a_canvas">Getting image data from a canvas</h3> + +<p>This example draws a rectangle, and then uses <code>getImageData()</code> to grab a portion of the canvas.</p> + +<h4 id="HTML">HTML</h4> + +<pre><code><canvas id="canvas"></canvas></code></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>The object retrieved by <code>getImageData()</code> 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).</p> + +<pre><code>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);</code></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}</p> + +<p> </p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p> + +<p> </p> + +<h2 id="См_также">См также</h2> + +<ul> + <li>Интерфейс, определяющий его, {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("ImageData")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <strong><code>CanvasRenderingContect2D.getLineDash()</code></strong>, предоставляемый Canvas 2D API который возвращает текущий паттерн штриховки линии.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.getLineDash();</pre> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в еденицах пространства координат). Если число заданных элементов нечетное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как <code>[5, 15, 25]</code> в результате мы получим <code>[5, 15, 25, 5, 15, 25]</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Получение_текущей_настройки_штриховки_линии">Получение текущей настройки штриховки линии</h3> + +<p>Этот пример демонстрирует метод <code>getLineDash()</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>Используя {{domxref("CanvasRenderingContext2D.setLineDash()", "setLineDash()")}} задано, что шрихи состоят из отрезков в 10 еденииц и разрывами между ними в 20 едениц.</p> + +<pre class="brush: js; highlight:[5]">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(); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Getting_the_current_line_dash_setting', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.getLineDash")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalAlpha</code></strong> Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.</p> + +<div class="note"> +<p>Смотрите также <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.globalAlpha = <em>value</em>; +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Число между <code>0.0</code> (полная прозрачность) и <code>1.0</code> (полная непрозрачность), включительно. Дефолтное значение <code>1.0</code>. Значение, не входящее в указанный диапазон, включая {{jsxref("Infinity")}} и {{jsxref("NaN")}}, не будут применены, и <code>globalAlpha</code> сохранит предыдущее значение или значение по-умолчанию.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Отрисовка_полупрозрачных_фигур">Отрисовка полупрозрачных фигур</h3> + +<p>В этом примере используется свойство <code>globalAlpha</code> для отрисовки двух полупрозрачных прямоугольников.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">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); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Drawing_translucent_shapes', 700, 180) }}</p> + +<h3 id="Наложение_прозрачных_фигур">Наложение прозрачных фигур</h3> + +<p>Этот пример демонстрирует эффект наложения нескольних прозрачных фигур друг на друга. Мы начнем с отрисовки непрозрачного фона, состоящего из четырех разноцветных квадратов. Далее мы устанавливаем свойство <code>globalAlpha</code> равное <code>0.2</code> (20% прозрачности); Уровень прозрачности будет применен ко всем прозрачным фигурам. Затем мы используем цикл <code>for</code> для отрисовки нескольких кругов с увеличивающимися радиусами.</p> + +<p>Для каждого нового круга прозрачность кругов, находящихся под ним, уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">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(); +} +</pre> + +<p>{{EmbedLiveSample("Overlaying_transparent_shapes", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p> + +<h3 id="Gecko-specific_notes">Gecko-specific notes</h3> + +<ul> + <li>Starting with Gecko 5.0, specifying invalid values for <code>globalAlpha</code> no longer throws a <code>SYNTAX_ERR</code> exception; these are now correctly silently ignored.</li> +</ul> + +<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3> + +<ul> + <li>In WebKit- and Blink-based browsers, a non-standard and deprecated method <code>ctx.setAlpha()</code> is implemented in addition to this property.</li> +</ul> + +<h2 id="Читайте_также">Читайте также</h2> + +<ul> + <li>The interface defining this property: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Интерфейс <code><strong>CanvasRenderingContext2D</strong></code> предоставляет контекст 2D рендеринга для поверхности рисования элемента {{ HTMLElement("canvas") }}.</p> + +<p>Для того, чтобы получить объект этого интерфейса, следует вызвать метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} объекта <code><canvas></code>, передав ему в качестве первого аргумента строку "2d":</p> + +<pre class="brush: js">var canvas = document.getElementById('mycanvas'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:</p> + +<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)"; +ctx.fillRect(10, 10, 55, 50); +</pre> + +<p>Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">руководстве по canvas</a> содержится больше информации, примеров и ссылок на ресурсы по этой теме.</p> + +<h2 id="Рисование_прямоугольников">Рисование прямоугольников</h2> + +<p>Существует три метода, которые сразу же рисуют прямоугольники на холсте.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Для всех пикселей, находящихся внутри прямоугольника, определенного начальной точкой <em>(x, y)</em> и размерами <em>(ширина, высота),</em> устанавливает черный прозрачный цвет, стирая любое ранее нарисованное содержимое.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Рисует залитый прямоугольник в позиции <em>(x, y)</em>, размеры которого определяются шириной <em>width</em> и высотой <em>height</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Рисует на холсте прямоугольник с начальной точкой в позиции <em>(x, y)</em>, имеющий ширину <em>w</em> и высоту <em>h</em>, используя текущий стиль обводки.</dd> +</dl> + +<h2 id="Рисование_текста">Рисование текста</h2> + +<p>Следующие методы позволяют создать текст. Смотрите так же информацию об объекте {{domxref("TextMetrics")}}, хранящем свойства текста.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Рисует (заливает) заданный текст в заданной позиции (x,y).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Рисует обводку заданного текста в заданной позиции <em>(x, y)</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Возвращает объект {{domxref("TextMetrics")}}.</dd> +</dl> + +<h2 id="Стили_линий">Стили линий</h2> + +<p>Следующие методы и свойства определяют как будут отрисовываться линии.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Ширина линий. По умолчанию <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Форма концов линий. Возможные значения: <code>butt</code> (по умолчанию), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Определяет форму вершин, в которых две линии сходятся. Возможные значения: <code>round</code>, <code>bevel</code>, <code>miter</code> (по умолчанию).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Ограничение длины сопряжений. По умолчанию <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из четного количества неотрицательных чисел.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Устанавливает текущий паттерн штриховой линии.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Указывает с какого места начать штриховку линии.</dd> +</dl> + +<h2 id="Стили_текста">Стили текста</h2> + +<p>Следующие свойства контролируют отображение текста.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Настройки шрифта. Значение по умолчанию: <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Определяет выравнивание текста по горизонтали. Возможные значения: <code>start</code> (по умолчанию), <code>end</code>, <code>left</code>, <code>right</code> или <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Определяет выравнивание текста относительно базовой линии. Возможные значения: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (по умолчанию), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Направление текста. Возможные значения: <code>ltr, rtl</code>, <code>inherit</code> (по умолчанию).</dd> +</dl> + +<h2 id="Стили_заливки_и_обводки">Стили заливки и обводки</h2> + +<p>Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Цвет или стиль применяемый внутри форм. По умолчанию #000 (черный).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (черный).</dd> +</dl> + +<h2 id="Градиенты_и_шаблоны">Градиенты и шаблоны</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Создает линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Создает радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Создает шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.</dd> +</dl> + +<h2 id="Тени">Тени</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Устанавливает эффект размытия. По умолчанию <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Цвет тени. По умолчанию полностью прозрачный черный.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Горизонтальное смещение тени. По умолчанию 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Вертикальное смещение тени. По умолчанию 0.</dd> +</dl> + +<h2 id="Контуры">Контуры</h2> + +<p>Следующие методы могут быть использованы для манипулирования контурами объектов.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Создает новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Перемещает начальную точку нового фрагмента контура в точку с координатами <strong>(x, y)</strong>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Соединяет последнюю точку фрагмента контура и точку с координатами <code>(x,y) </code>прямой линией .</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Добавляет квадратичную кривую Безье к текущему контуру.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Добавляет к контуру дугу, с центром в точке <em>(x, y)</em>, радиусом <em>r,</em> имеющую угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующуюся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Добавляет к контуру дугу, заданную контрольными точками и радиусом, соединяющуюся с предыдущей точкой прямой линией.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>Добавляет к контуру эллипс, с центром в точке <em>(x, y)</em>, заданный радиусами <em>radiusX</em> и <em>radiusY</em>, имеющий угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующийся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Создает контур прямоугольника с началом в точке <em>(x, y)</em>, и размерами, заданными шириной <em>width</em> и высотой <em>height</em>.</dd> +</dl> + +<h2 id="Рисование_контуров">Рисование контуров</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Заливает фрагменты контура текущей заливкой.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Выполняет обводку фрагментов контура текущей обводкой.</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Прокручивает текущий или заданный контур в видимую область окна браузера.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Создает область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода <code>clip()</code> применяется только внутри области отсечения. Пример использования см. в разделе <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Области отсечения</a> руководства по Canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Позволяет узнать, содержится ли указанная точка в текущем контуре.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Позволяет узнать, находится ли указанная точка на обводке контура.</dd> +</dl> + +<h2 id="Трансформации">Трансформации</h2> + +<p>Объекты в контексте рендеринга <code>CanvasRenderingContext2D</code> имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов {{domxref("Path2D")}}. Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты {{domxref("SVGMatrix")}}, которые будут использоваться в будущем как замена устаревшим методам.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> + <dd>Текущая матрица преобразований ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Добавляет к элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод <code>transform()</code> с теми же аргументами.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Переустанавливает текущую матрицу преобразований в единичную матрицу.</dd> +</dl> + +<h2 id="Композиция">Композиция</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию <code>1.0</code> (полностью непрозначный).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>Совместно с примененным <code>globalAlpha</code> это свойство определяет как формы и изображения накладываются на существующее изображение.</dd> +</dl> + +<h2 id="Рисование_изображений">Рисование изображений</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.</dd> +</dl> + +<h2 id="Манипулирование_пикселями">Манипулирование пикселями</h2> + +<p>См. также объект {{domxref("ImageData")}}.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Создает новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Возвращает объект {{domxref("ImageData")}}, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной <em>sw</em> и высотой <em>sh</em>, начальная точка которого находится в позиции <em>(sx, sy)</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Переносит данные, заданные в объекте {{domxref("ImageData")}}, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы будут только пикселы из этой области.</dd> +</dl> + +<h2 id="Сглаживание_изображений">Сглаживание изображений</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Режим сглаживания изображений; если отключен, изображения не будут сглаживаться при масштабировании.</dd> +</dl> + +<h2 id="Состояние_холста">Состояние холста</h2> + +<p>Контекст рендеринга <code>CanvasRenderingContext2D</code> содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесенные в него изменения с помощью метода <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Восстанавливает состояние стилей рисования в значение, сохраненное методом <code>save()</code> в стек состояний последним.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может иметь значение {{jsxref("null")}}, если она не связана с элементом {{HTMLElement("canvas")}}.</dd> +</dl> + +<h2 id="Области_попадания">Области попадания</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Добавляет область попадания к холсту.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Удаляет область попадания с указанным <code>id</code> с холста.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Удаляет все области попадания с холста.</dd> +</dl> + +<h2 id="Нестандартные_API">Нестандартные API</h2> + +<h3 id="Blink_и_WebKit">Blink и WebKit</h3> + +<p>Большинство из этих API являются <a href="https://code.google.com/p/chromium/issues/detail?id=363198">запрещенными и будут удалены в будущем</a>.</p> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Удаляет все настройки теней, такие как {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalAlpha")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineWidth")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineJoin")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineCap")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.miterLimit")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.strokeStyle")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.fillStyle")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.getLineDash()")}} и {{domxref("CanvasRenderingContext2D.setLineDash()")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.lineDashOffset")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> +</dl> + +<h3 id="Только_Blink">Только Blink</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt> + <dd>По аналогии с аналогичным методом класса <code>WebGLRenderingContext</code>, возвращает объект <code>Canvas2DContextAttributes</code>, который содержит аттрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и аттрибут "alpha" (<code>true</code> по умолчанию), показывающий используется ли прозрачность на холсте.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>По аналогии с аналогичным методом класса <code>WebGLRenderingContext</code>, возвращает <code>true</code> если контекст canvas был потерян, <code>иначе false</code>.</dd> +</dl> + +<h3 id="Только_WebKit">Только WebKit</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd><span id="result_box" lang="ru"><span>Размер хранилища по отношению к элементу canvas</span></span>. Смотри <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Только_Gecko">Только Gecko</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd> +</dl> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt> + <dd>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.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt> + <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>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.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt> + <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Cпецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Примечания_о_совместимости">Примечания о совместимости</h3> + +<ul> + <li>Начиная с Gecko 5.0 {{geckoRelease("5.0")}}, указание недопустимых значений для следующих методов и свойств молча игнорируется: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. </p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre><em>ctx</em>.lineCap = "butt" || "round" || "square";</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>butt</code></dt> + <dd>Концы линий прямые.</dd> + <dt><code>round</code></dt> + <dd>Концы линий скругленные.</dd> + <dt><code>square</code></dt> + <dd>Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineCap</h3> + +<p>Ниже представлен простой фрагмент кода, использующий <code>lineCap.</code></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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();</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}</p> + +<h3 id="A_lineCap_example" name="A_lineCap_example">Разница между значениями lineCap</h3> + +<p>В примере нарисованы три линии с разными значениями <code>lineCap</code>. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.</p> + +<p>Левая линия будет использовать значение lineCap <code>"butt"</code>. Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap <code>"round"</code>. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение <code>"square"</code>. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<pre class="brush: js">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(); +}</pre> + +<p>{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместиммоссть_с_браузерами">Совместиммоссть с браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p> + +<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3> + +<ul> + <li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineCap()</code>.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данное свойство {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<div></div> + +<p>Свойство <code><strong>CanvasRenderingContext2D.lineDashOffset</strong></code> в Canvas 2D API устанавливает смещение штрихов, или «фаза».</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Линии нарисованы вызовом метода {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.lineDashOffset = <em>value</em>; +</pre> + +<dl> + <dt><code>value</code></dt> + <dd>Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Смещение_штрихов">Смещение штрихов</h3> + +<p>Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[15]">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(); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>Линия со смещением будет нарисована красным цветом.</p> + +<p>{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p> + +<h3 id="Эффект_марширующих_муравьев">Эффект марширующих муравьев</h3> + +<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьев</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p> + +<div class="hidden"> +<h6 id="HTML_2">HTML</h6> + +<pre class="brush: html"><canvas id="canvas"></canvas></pre> +</div> + +<pre class="brush: js">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(); +</pre> + +<p>{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}</p> + +<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3> + +<ul> + <li><code>mozDashOffset</code> свойство будет объявлено устаревшим и будет удалено в будущем, смотрите {{bug(931643)}}. Вместо него используйте <code>lineDashOffset</code>.</li> +</ul> + +<h3 id="Специфичные_для_WebKit_заметки">Специфичные для WebKit заметки</h3> + +<ul> + <li>В браузерах на основе WebKit (например, Safari) помимо этого метода реализовано нестандартное и устаревшее свойство <code>webkitLineDashOffset</code>. Вместо него используйте <code>lineDashOffset</code>.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Применение стилей и цвета</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.</p> + +<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";</pre> + +<h3 id="Значения">Значения</h3> + +<p>Свойство может принимать три значения: <code>round</code>, <code>bevel</code> и <code>miter</code>. По умолчанию установленно значение <code>miter</code>. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd>Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.</dd> + <dt><code>bevel</code></dt> + <dd>"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.</dd> + <dt><code>miter</code></dt> + <dd>Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineJoin</h3> + +<p>Ниже представлен простой фрагмент кода, использующий <code>lineJoin</code> для скругления места соединения линий.</p> + +<p> </p> + +<h4 id="HTML">HTML</h4> + +<pre><code><canvas id="canvas"></canvas></code></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre><code>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();</code></pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p> + +<p> </p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example">Разница между значениями lineJoin</h3> + +<p>Пример ниже наглядно демонстрирует разницу между значениями свойства <code>lineJoin.</code></p> + +<p> </p> + +<div class="hidden"> +<pre><code><canvas id="canvas" width="150" height="150"></canvas></code></pre> +</div> + +<pre><code>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(); +}</code></pre> + +<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<p> </p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_брузерами">Совместимость с брузерами</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p> + +<p> </p> + +<h2 id="Особенность_WebKitBlink">Особенность WebKit/Blink</h2> + +<ul> + <li> + <p>В<span id="cke_bm_84C" style="display: none;"> </span> браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineJoin()</code>.</p> + </li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>lineTo()</strong></code> - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с короординатами <code>(x, y)</code>.</p> + +<p>Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоствляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.lineTo(<em>x</em>, <em>y</em>); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>OX значение конца линии.</dd> + <dt><code>y</code></dt> + <dd>OY значение конца линии.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Рисование_прямых_линий">Рисование прямых линий</h3> + +<p>Этот пример рисует прямую линию используя метод <code>lineTo()</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).</p> + +<pre class="brush: js; highlight:[6]">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(); // Отображает путь</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}</p> + +<h3 id="Рисование_соединенных_линий">Рисование соединенных линий</h3> + +<p>Каждый вызов <code>lineTo()</code> автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">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();</pre> + +<h4 id="Результаты">Результаты</h4> + +<p>{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code>Свойство<strong> CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong>, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</p> + +<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.lineWidth = value;</var></pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_lineWidth_property" name="Using_the_lineWidth_property">Использование свойства lineWidth</h3> + +<p>Ниже представлен простой фрагмент кода, использующий lineWidth.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[6]">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(); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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(0,0); +ctx.lineWidth = 15; +ctx.lineTo(100, 100); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возожность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2> + +<ul> + <li>В браузерах на базе WebKit и Blink, помимо этого свойства также поддерживается нестандартный метод <code>ctx.setLineWidth()</code>.</li> +</ul> + +<h2 id="Особенности_Gecko">Особенности Gecko</h2> + +<ul> + <li>В Gecko ниже 2.0 версии, при задании lineWidth отрицательного значения выбрасывалось исключение.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.measureText(),</span></code></strong> предоставляемый Canvas 2D API, возвращает объект {{domxref("TextMetrics")}}, содержащий информацию об измеренном тексте (например, ширину).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.measureText(<em>text</em>);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>text</code></dt> + <dd>Строка {{jsxref("String")}} для измерения.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Объект {{domxref("TextMetrics")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Используя элемент {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>... вы можете получить объект {{domxref("TextMetrics")}}, используя следующий код:</p> + +<pre class="brush: js; highlight:[4]">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +let text = ctx.measureText('Hello world'); +console.log(text.width); // 56; +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("TextMetrics")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <strong>CanvasRenderingContext2D.miterLimit</strong> устанавливает/возвращает максимальную длину среза.</p> + +<p>Длина среза это расстояние между внутренним и внешнем углом, образованным пересечением двух линий.</p> + +<div class="note"> +<p>For more info about miters, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.miterLimit = <em>число</em>;</pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>число</code></dt> + <dd>Положительное число, определяющее максимальную длину среза. Если текущая длина среза будет превышать заданное значение, то угол будет отображаться как при значении <code>bevel</code> свойства <code>lineJoin</code>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_miterLimit_property">Using the <code>miterLimit</code> property</h3> + +<p>See the chapter <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#A_demo_of_the_miterLimit_property">Applying styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> for more information.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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(0,0); +ctx.lineWidth = 15; +ctx.lineTo(100, 100); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{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")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.miterLimit")}}</p> + +<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3> + +<ul> + <li>In WebKit- and Blink-based Browsers, a non-standard and deprecated method <code>ctx.setMiterLimit()</code> is implemented in addition to this property.</li> +</ul> + +<h3 id="Gecko-specific_notes">Gecko-specific notes</h3> + +<ul> + <li>Starting Gecko 2.0 {{geckoRelease("2.0")}}, setting <code>miterLimit</code> to a negative value no longer throws an exception; instead, it properly ignores non-positive values.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong>, предоставляемый Canvas 2D API, перемещает начальную точку нового фрагмента контура в координаты <code>(x, y)</code>.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var> +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Координата точки по оси x.</dd> + <dt><code>y</code></dt> + <dd>Координата точки по оси y.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метода_moveTo">Использование метода <code>moveTo</code></h3> + +<p>Ниже представлен простой фрагмент кода, использующий метод <code>moveTo</code> для того, чтобы переместить указатель в начальную позицию для рисования линии.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(200, 50); +ctx.stroke(); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<div></div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.putImageData()</code></strong> метод Canvas 2D API рисует данные из заданного {{domxref("ImageData")}} объекта на холст. На этот метод не влияет матрица преобразования холста.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Данные изображения могут быть получены с холста с помощью метода {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}}.</p> +</div> + +<p>Вы можете найти больше информации о <code>putImageData()</code> и общих манипуляциях с содержимым холста в статье <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Пиксельные манипуляции с холстом</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <em>ctx</em>.putImageData(<em>imageData</em>, <em>dx</em>, <em>dy</em>); +void <em>ctx</em>.putImageData(<em>imageData</em>, <em>dx</em>, <em>dy</em>, <em>dirtyX</em>, <em>dirtyY</em>, <em>dirtyWidth</em>, <em>dirtyHeight</em>); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>imageData</code></dt> + <dd>Объект {{domxref("ImageData")}}, содержащий массив значений пикселей..</dd> + <dt><code>dx</code></dt> + <dd>Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.</dd> + <dt><code>dy</code></dt> + <dd>Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.</dd> + <dt><code>dirtyX</code>{{optional_inline}}</dt> + <dd>Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.</dd> + <dt><code>dirtyY</code> {{optional_inline}}</dt> + <dd>Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.</dd> + <dt><code>dirtyWidth</code> {{optional_inline}}</dt> + <dd>Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.</dd> + <dt><code>dirtyHeight</code> {{optional_inline}}</dt> + <dd>Высота прямоугольника для рисования. По умолчанию высота данных изображения.</dd> +</dl> + +<h3 id="Ошибки">Ошибки</h3> + +<dl> + <dt><code>NotSupportedError</code></dt> + <dd>Выбрасывается, если любой из аргументов бесконечен.</dd> + <dt><code>InvalidStateError</code></dt> + <dd>Выбрасывается, если данные объекта ImageData были отделены.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Понимание_putImageData">Понимание putImageData</h3> + +<p>Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Понимание_putImageData', '', '', '', 'Web/API/CanvasRenderingContext2D/putImageData',800) }}</p> + +<h3 id="Потеря_данных_из-за_оптимизации_браузера">Потеря данных из-за оптимизации браузера</h3> + +<div class="blockIndicator warning"> +<p> Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью <code>putImageData()</code>, могут быть возвращены в эквивалентный <code>getImageData()</code> в качестве различных значений.</p> +</div> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">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);</pre> + +<p>Вывод может выглядеть так:</p> + +<pre>before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ] +after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузера">Совместимость с браузера</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.putImageData")}}</p> + +<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3> + +<ul> + <li>Начиная с Gecko 10.0 {{ geckoRelease("10.0") }}, нескончаемые(например, NaN или Infinity) значения любого из этих параметров приводят к тому, что вызов <code>putImageData()</code> будет игнорироваться, а не вызывать исключение.</li> + <li>To comply with the specification, starting with Gecko 16.0 {{geckoRelease("16.0")}}, a call with an invalid number of arguments (only 3 or 7 arguments are valid), will now throw an error ({{bug(762657)}}).</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("ImageData")}} объект</li> + <li>{{domxref("CanvasRenderingContext2D.getImageData()")}}</li> + <li><a href="/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Пиксельные манипуляции с холстом</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong>, предоставляемый Canvas 2D API, создает контур прямоугольника в позиции <em>(x, y)</em>, размеры которого устанавливаются аргументами <em>width</em> и <em>height</em>. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var> +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Координата начальной точки прямоугольника по оси x.</dd> + <dt><code>y</code></dt> + <dd>Координата начальной точки прямоугольника по оси y.</dd> + <dt><code>width</code></dt> + <dd>Ширина прямоугольника.</dd> + <dt><code>height</code></dt> + <dd>Высота прямоугольника.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метода_rect">Использование метода <code>rect</code></h3> + +<p>Ниже представлен простой фрагмент кода, использующий метод <code>rect</code> для создания контура. Для того чтобы нарисовать контур на холсте вы можете воспользоваться методами {{domxref("CanvasRenderingContext2D.fill", "fill()")}} или {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Обратите внимание так же на методы {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} и {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} которые могут сделать тоже самое за один раз .</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[3]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.restore()</code></strong> восстанавливает предварительно сохраненное состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.</p> + +<p>Fore more information about the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.save#Drawing_state">drawing state</a>, see {{domxref("CanvasRenderingContext2D.save()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <em>ctx</em>.restore();</pre> + +<h2 id="Пример">Пример</h2> + +<h3 id="Restoring_a_saved_state">Restoring a saved state</h3> + +<p>This example uses the <code>save()</code> method to save the default state and <code>restore()</code> to restore it later, so that you are able to draw a rect with the default state later.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[11]">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); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Restoring_a_saved_state', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.restore")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.save()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<div>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var> +</pre> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>angle</code></dt> + <dd>Угол поворота по часовой стрелке, в радианах. Вы также можете использовать <code><em>degree</em> * Math.PI / 180</code> если вы хотите использовать для угла значение градуса (degree).</dd> +</dl> + +<p>Центром вращения всегда является начало холста. Для изменения центра вращения, нам необходимо передвинуть холст, используя метод {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_метода_rotate">Использование метода <code>rotate</code></h3> + +<p>Ниже приведен простой пример кода, который использует метод <code>rotate</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">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); +</pre> + +<p>Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.</p> + +<h3 id="Состояние_чертежа">Состояние чертежа</h3> + +<p>Состояние чертежа, которое сохраняется в стеке, состоит из:</p> + +<ul> + <li>Текущая матрица преобразования.</li> + <li>Текущая область отсечения.</li> + <li>The current dash list.</li> + <li>Текущие значения следующих атрибутов: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> +</ul> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <em>ctx</em>.save();</pre> + +<h2 id="Пример">Пример</h2> + +<h3 id="Сохранение_состояния_чертежа">Сохранение состояния чертежа</h3> + +<p>Этот пример использует метод <code>save()</code> для сохранения состояния по умолчанию, и метод <code>restore()</code> для восстановления состояния позже, чтобы позже можно было нарисовать прямоугольник с состоянием по умолчанию.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre><code>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);</code></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <strong><code>CanvasRenderingContext2D.stroke()</code></strong> Canvas 2D API обводит текущий или данный контур цветом <code>strokeStyle</code>.</p> + +<p>Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.</p> + +<p>Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var> +void <var><em>ctx</em>.stroke(path);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>path</code></dt> + <dd>{{domxref ("Path2D")}} - контур, который нужно обвести.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_метода_stroke()">Использование метода <code>stroke()</code></h3> + +<p>В этом примере с помощью метода <code>rect()</code> создается прямоугольник, и затем с помощью <code>stroke()</code> отрисовывается на холсте.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +</pre> + +<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузеров">Поддержка браузеров</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий этот метод - {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong>, предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами <em>(x, y)</em>, а так же ширину<em> w</em> и высоту <em>h</em>, используя текущий стиль линий.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, width, height);</var> +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Координата начальной точки прямоугольника по оси x.</dd> + <dt><code>y</code></dt> + <dd>Координата начальной точки прямоугольника по оси y.</dd> + <dt><code>width</code></dt> + <dd>Ширина прямоугольника.</dd> + <dt><code>height</code></dt> + <dd>Высота прямоугольника.</dd> +</dl> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метода_strokeRect">Использование метода <code>strokeRect</code></h3> + +<p>Ниже представлен простой фрагмент кода, использующий метод <code>strokeRect</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.strokeStyle = "green"; +ctx.strokeRect(10, 10, 100, 100); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство<strong> </strong><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong>, предоставляемое Canvas 2D API задает цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p> + +<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color; +</var><var><em>ctx</em>.strokeStyle = gradient; +</var><var><em>ctx</em>.strokeStyle = pattern;</var> +</pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code>color</code></dt> + <dd>{{domxref("DOMString")}} строка содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("<color>")}}).</dd> + <dt><code>gradient</code></dt> + <dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd> + <dt><code>pattern</code></dt> + <dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Использование <code>strokeStyle</code> с цветом</h3> + +<p>Ниже представлен простой фрагмент кода, использующий <code>strokeStyle</code> с цветом.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.strokeStyle = "blue"; +ctx.strokeRect(10, 10, 100, 100); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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 = "blue"; +ctx.strokeRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Использование <code>strokeStyle </code>в циклах<code> for</code></h3> + +<p>В этом примере свойство <code>strokeStyle</code> используется для рисования границ фигур. Мы используем метод {{domxref("CanvasRenderingContext2D.arc", "arc()")}} для рисования кругов.</p> + +<pre class="brush: js">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(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>Результат выглядит так:</p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2> + +<ul> + <li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setStrokeColor()</code>. + + <pre class="brush: js">setStrokeColor(color, optional alpha); +setStrokeColor(grayLevel, optional alpha); +setStrokeColor(r, g, b, a); +setStrokeColor(c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText(),</code></strong> предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.</p> + +<p>См. также метод {{domxref("CanvasRenderingContext2D.fillText()")}} для заливки контуров текста.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(text, x, y [, maxWidth]);</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>text</code></dt> + <dd>Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> + <dt><code>x</code></dt> + <dd>Коодрдината левой нижней точки текста по оси x.</dd> + <dt><code>y</code></dt> + <dd>Коодрдината левой нижней точки текста по оси y.</dd> + <dt><code>maxWidth</code> {{optional_inline}}</dt> + <dd>Максимальная ширина текста. Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_метода_strokeText">Использование метода strokeText</h3> + +<p>Ниже представлен простой фрагмент кода, использующий strokeText.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 100); +</pre> + +<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}}. Так что, если значение <code>textAlign</code> равно <code>"center"</code>, то текст будет прорисован в <code>x - (width / 2)</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>left</code></dt> + <dd>Выравнивание текста по левому краю.</dd> + <dt><code>right</code></dt> + <dd>Выравнивание текста по правому краю.</dd> + <dt><code>center</code></dt> + <dd>Текст отцентрирован.</dd> + <dt><code>start</code></dt> + <dd>Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).</dd> + <dt><code>end</code></dt> + <dd>Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево</dd> +</dl> + +<p>По умолчанию значение <code>textAlign </code>установлено как <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">"start"</span></font>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Использование значения <code>textAlign</code></h3> + +<p>Довольно простой сниппет использования значения <code>textAlign </code>для изменения выравнивания текста.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.textAlign = 'left'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><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.textAlign = 'left'; +ctx.strokeText('Hello world', 0, 100);</textarea> +</pre> + +<pre class="brush: js">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); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс, предоставляющий данный метод {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; +</pre> + +<h3 id="Опции">Опции</h3> + +<p>Возможные значения:</p> + +<dl> + <dt><code>"top"</code></dt> + <dd>The text baseline is the top of the em square.</dd> + <dt><code>"hanging"</code></dt> + <dd>The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)</dd> + <dt><code>"middle"</code></dt> + <dd>The text baseline is the middle of the em square.</dd> + <dt><code>"alphabetic"</code></dt> + <dd>The text baseline is the normal alphabetic baseline. Значение по умолчанию.</dd> + <dt><code>"ideographic"</code></dt> + <dd>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.)</dd> + <dt><code>"bottom"</code></dt> + <dd>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.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Сравнение_значений_свойства">Сравнение значений свойства</h3> + +<p>Этот пример демонстрирует различные значения свойства <code>textBaseline</code> и отображение линий при их приминениях.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas" width="550" height="500"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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); +}); +</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Интерфейс определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> +</ul> |