Поворот текста 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 ... Кстати, setTransform не кажется важным !! - person antnewbee; 10.06.2012
comment
@antnewbee Да, setTransform здесь не так важно, но рекомендуется сбрасывать матрицу преобразования, когда вы начинаете свои преобразования. В противном случае может быть сложно отслеживать все преобразования. - person Engineer; 10.06.2012