[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.rotate()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

rotate(angle)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 ctx.arc(0, 0, 10, 0, 2 * Math.PI);
 ctx.fillStyle = "black";
 ctx.fill();
 
 ctx.fillStyle = "orange";
 ctx.fillRect(300, 50, 25, 25);
 ctx.fillStyle = "yellow";
 ctx.fillRect(300, 150, 25, 25); 
 
 ctx.rotate((45 * Math.PI) / 180);
 
 ctx.fillStyle = "orange";
 ctx.fillRect(300, 50, 25, 25);
 ctx.fillStyle = "yellow";
 ctx.fillRect(300, 150, 25, 25);

 ctx.setTransform(1, 0, 0, 1, 0, 0);

 ctx.fillStyle = "orange";
 ctx.fillRect(350, 50, 25, 25);
 ctx.fillStyle = "yellow";
 ctx.fillRect(350, 150, 25, 25); 
 
 ctx.translate(425, 75);
 ctx.rotate((45 * Math.PI) / 180);
 ctx.translate(-425, -75);
 ctx.fillStyle = "orange";
 ctx.fillRect(400, 50, 25, 25);
 
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 ctx.translate(425, 175);
 ctx.rotate((45 * Math.PI) / 180);
 ctx.translate(-425, -175);
 ctx.fillStyle = "yellow";
 ctx.fillRect(400, 150, 25, 25); 

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Metoda CanvasRenderingContext2D.rotate() dodaje obrót do macierzy transformacji. Parametry angle - kąt obrotu, zgodnie z ruchem wskazówek zegara, w radianach, można użyć degree * Math.PI / 180 do obliczenia radiana na podstawie stopnia. Środkowym punktem obrotu jest zawsze początek płótna x = 0, y = 0. Aby zmienić punkt środkowy, należy przesunąć płótno za pomocą metody translate().

Zobacz też:
translate() -