--- 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 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.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> {{Specifications}} <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> <p>{{Compat}}</p> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> </ul>