1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: CanvasRenderingContext2D.rotate()
slug: Web/API/CanvasRenderingContext2D/rotate
tags:
- metodo
translation_of: Web/API/CanvasRenderingContext2D/rotate
---
<div>{{APIRef}}</div>
<p>El método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> de la API Canvas 2D añade una rotación a la matriz de transformación.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">void <em>ctx</em>.rotate(<em>angulo</em>);
</pre>
<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><code>angulo</code></dt>
<dd>El ángulo de rotación en radianes, en sentido horario. Se puede usar <em><code>grado</code></em><code><code>*</code> Math.PI / 180</code> si se quiere calcular a partir de un valor de grado sexagesimal.</dd>
</dl>
<p>El centro de rotación es siempre el orígen del canvas. Para cambiar el centro de rotación hay que mover el canvas mediante el método {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Rotando_una_figura">Rotando una figura</h3>
<p>En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación es la esquina superior izquierda del canvas y no un punto cualquiera relativo a alguna figura.</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:[14]">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// origen del punto de transformación
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
// rectángulo sin rotar
ctx.fillStyle = 'gray';
ctx.fillRect(100, 0, 80, 20);
// rectángulo rotado 45º
ctx.rotate(45 * Math.PI / 180);
ctx.fillStyle = 'red';
ctx.fillRect(100, 0, 80, 20);
// se reinicia la matriz de transformación a la matriz identidad
ctx.setTransform(1, 0, 0, 1, 0, 0);
</pre>
<h4 id="Resultado">Resultado</h4>
<p>El <span style="color: blue;">centro de rotación es azul</span>. El <span style="color: gray;">rectángulo no rotado es gris</span>, y el <span style="color: red;">rectángulo rotado es rojo</span>.</p>
<p>{{ EmbedLiveSample('Rotating_a_shape', 700, 180) }}</p>
<h3 id="Rotando_una_figura_por_su_centro">Rotando una figura por su centro</h3>
<p>Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:</p>
<ol>
<li>Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.</li>
<li><code>rotate()</code> rota la matriz la cantidad deseada.</li>
<li>Finalmente, <code>translate()</code> mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.</li>
</ol>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<p>La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en (80 + 140 / 2) = 150. Su centro en la coordenada vertical será (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75).</p>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// rectángulo sin rotar
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);
// Matriz de transformación
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
// rectángulo rotado
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);
</pre>
<h4 id="Resultado_2">Resultado</h4>
<p>El <span style="color: gray;">rectángulo no rotado es gris</span>, y el <span style="color: red;">rectángulo rotado es rojo</span>.</p>
<p>{{ EmbedLiveSample('Rotating_a_shape_around_its_center', 700, 180) }}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Status</th>
<th scope="col">Comentarios</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="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2>
<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a estos datos, vaya a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y haga un pull request.</div>
<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li>La interface donde se define este método: {{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
