CanvasRenderingContext2D.rotate()

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

Метод CanvasRenderingContext2D.rotate() из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.

Syntax

void ctx.rotate(angle);

Parameters

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

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

Примеры

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

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

HTML

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

JavaScript

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

ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(70, 0, 100, 30);

// reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

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

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

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

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

Specification Status Comment
HTML Living Standard
Определение 'CanvasRenderingContext2D.rotate' в этой спецификации.
Живой стандарт  

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка Да12 Да Да Да Да
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да Да Да Да Да Да Да

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

Метки документа и участники

Внесли вклад в эту страницу: bagau
Обновлялась последний раз: bagau,