HTML5 ротация на текст

Искам да завъртя текста за оста x на графиката. По-долу е кодът, който използвам

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

След като напиша текста, го завъртам в първоначалното си положение. Но някак си не работи. Работният код може да бъде намерен на http://intercepter.comli.com/example3.html

Прегледах тази статия и я пробвах, но е просто не работи. Моля, помогнете ми


javascript html rotation html5-canvas
person antnewbee    schedule 10.06.2012    source източник
comment
възможен дубликат на Рисуване на завъртян текст върху HTML5 платно   -  person robertc    schedule 10.06.2012
comment
здравей Робърт.. Прегледах тази статия и също написах във въпроса. Но все още не работи.   -  person antnewbee    schedule 10.06.2012

Отговори (1)


arrow_upward
2
arrow_downward

Завъртането с 20*Math.PI/2 е подобно на това да не завъртате нищо, защото:

20*Math.PI/2 = 10*Math.PI = 2*Math.PI

Не сте сигурни как искате да завъртите текста си, но вместо

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

можете да опитате да използвате трансформации като това:

context.save();
context.setTransform(1,0,0,1,0,0);
context.translate(startX + (i * barWidth) + barWidth/2, chartHeight - 10); 
context.rotate(-Math.PI/2);

context.fillText(name, 0, 0, 200);        
context.restore();

Вижте работещото ДЕМО:

person Engineer    schedule 10.06.2012
comment
о, Боже... съжалявам... възнамерявах да използвам context.rotate(20*Math.PI/180); но по някакъв начин се промени на /2 :( ... Актуализира кода тук intercepter.comli.com/example3.html ... BTW setTransform не изглежда важен !! - person antnewbee; 10.06.2012
comment
@antnewbee Да, setTransform тук не е толкова важно, но е добра практика да нулирате трансформационната матрица, когато започнете своите трансформации. В друг случай може да е трудно да проследите всички трансформации. - person Engineer; 10.06.2012