Środa, 12 grudnia 2018 • 346 dzień roku • Imieniny: Aleksandra, Adelajdy, Dagmary Kontakt

Canvas - obrót tekstu


Poniżej znajduje się nasz wyjściowy obrazek z tekstem, który będziemy chcieli obrócić o zadany kąt (w prezentowanym przypadku będzie to 25 stopni) w kierunku przeciwnym do ruchu wskazówek zegara. W tym celu użyjemy metody rotate(x), gdzie x jest kątem w radianach.

var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');	
	
// kąt obrotu w stopniach
var alfa = 25;

// tekst
var label = 'Who the hell is Alice?';
				
// współrzędna pozioma
var x = Math.floor(canvas.width/3);
				
// współrzędna pionowa
var y = Math.floor(2*canvas.height/3);

//zapis stanu canvas
ctx.save();

//obrót
ctx.rotate((-1)*alfa * Math.PI/180);

// font
setFontStyle( ctx, 'bold', 22, 'sans-serif', '#407e7d' ); 

// rysowanie
ctx.fillText(label, x, y);

// przywrócenie stanu canvas
ctx.restore();

Po wykonaniu powyższego kodu zazwyczaj okazuje się, że uzyskany efekt nie odpowiada naszym oczekiwaniom, gdyż obracany tekst jest w najlepszym razie przesunięty, a w przypadku obrotu o większe kąty może być również obcięty lub w całości wyjść poza obszar płótna. Przesunięcie obracanego tekstu (lub obrazka) wynika ze sposobu rysowania na płótnie: najpierw wykonywany jest obrót całego płótna względem jego lewego górnego rogu, a dopiero potem następuje rysowanie. Wynika z tego np. to, że przy obrocie o 90 stopni całe obrócone płótno wychodzi poza swój obszar wyjściowy.

Po obrocie o kąt 25 stopni widać, że Alice jest już prawie poza zasięgiem.

Żeby sprowadzić Alice z powrotem na płótno, wystarczy znaleźć współrzędne danego punktu (x,y) po obrocie o kąt przeciwny do kąta obrotu płótna.

Pobierz plik

var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');	
	
// kąt obrotu w stopniach
var alfa = 25;

// tekst
var label = 'Who the hell is Alice?';
				
// współrzędna pozioma
var x = Math.floor(canvas.width/3);
				
// współrzędna pionowa
var y = Math.floor(2*canvas.height/3);

//zapis stanu canvas
ctx.save();

//obrót
ctx.rotate((-1)*alfa * Math.PI/180);
	
// współrzędne punktu (x,y) po obróceniu o kąt alfa
var xPrim = x*Math.cos(alfa * Math.PI/180)-y*Math.sin(alfa * Math.PI/180);
var yPrim = x*Math.sin(alfa * Math.PI/180)+y*Math.cos(alfa * Math.PI/180);
	
// font
setFontStyle( ctx, 'bold', 22, 'sans-serif', '#407e7d' );	
	
// rysowanie
ctx.fillText(label, xPrim, yPrim);
 
// przywrócenie stanu canvas
ctx.restore();

W efekcie cała Alice jest znowu na płótnie:


Zobacz też:

Tworzenie wykresu liniowego w HTML

Tworzenie wykresu schodkowego w HTML

Tworzenie wykresu słupkowego w HTML