English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
Manual de referência do canvas HTML
将正方形旋转 30 度：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas rotate()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(10*Math.PI/180);
ctx.fillRect(50,50,100,100);
</script>
</body>
</html>Teste e veja ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam rotate() método.
Atenção:Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
O método rotate() roda a desenho atual.
Atenção:A rotação afetará apenas o desenho feito após a rotação.
| Sintaxe JavaScript: | context.rotate(angle); |
|---|
| Parâmetro | Descrição |
|---|---|
| angle | ângulo de rotação, em radianos. Para converter graus para radianos, use degrees*Math.PI/180 fórmula para calcular. Exemplo: para girar 5 Graus, pode especificar a seguinte fórmula:5*Math.PI/180。 |