자바 스크립트 CSS 방향 회전

이것은 간단 할 것 같지만 결과가 없으면 높고 낮은 것으로 검색했습니다.자바 스크립트 CSS 방향 회전

context.fillText('name', 10, 10, 20);

은 지금 수직 방향으로이 텍스트를 가질 필요가 다음과 같이

나는 자바 스크립트로 동적 텍스트를 만들었습니다. 참고 :이 텍스트는 캔버스를 회전시키지 않으려는 다른 개체가있는 캔버스에 표시되므로 찾고있는 솔루션이 아닙니다.

저는이 각도와 색상 속성을 캔버스의 여러 텍스트에 적용하려고 할 수있는 CSS 이유를 사용하는 솔루션에 만족할 것입니다. 나는 CSS를 사용하는 것에 익숙하지 않기 때문에 어떻게 작성하는지 알아낼 수 없으며이 텍스트를 식별하여 JavaScript에서 인라인으로 적용 할 수있다.

이런 식으로 : CSS rotate text - complicated이지만이 예제에는 html로 된 텍스트가 있으므로 텍스트를 참조하는 tag라는 이름이 붙어 있습니다. 내 텍스트에는 이름 태그가 없습니다 (또는 추가 할 수 있습니까?) 그래서 나는 거기에 달라 붙어 있습니다.

출처

2013-06-08 Hannington Mambo

이 (저장 '사용으로 간주 되세요)' 및'복원()'? – tom

캔버스에 렌더링 된 텍스트에 CSS를 적용 할 수 없습니다. – gilly3

Noted, gilly3. 다른 개체 (선, 이미지 등)의 방향을 유지하면서 원하는 텍스트 개체의 세로 방향을 얻기위한 제안? –

당신은 텍스트로 변환을 제한 할 save() 및 restore()를 사용할 수 있습니다

c = canvas.getContext("2d"); 
c.save(); // save the current styles and transformations 
c.translate(20, 50); // move origin to (20, 50) 
c.rotate(-Math.PI/2); // rotate 90 degrees anticlockwise about origin 
c.fillText("name", 0, 0); // draw the text vertically 
c.restore(); // restore previous styles and transformations

데모 : http://jsfiddle.net/chtJ2/

출처

2013-06-08 09:46:41 tom

필자는 fillText를 document.write 프로 시저로 대체 할 수 있다는 것을 알아 차 렸지만 간격을 유지하기위한 최선의 노력에도 불구하고 텍스트 자체가 뒤죽박죽되었습니다. 이 (톰의 대답)은 처음부터 어떻게 의도했는지 알려주므로 기쁘게 생각합니다. –

에 대해 어떻게 :

.fillText { 
    -moz-transform: rotate(7.5deg); 
     -o-transform: rotate(7.5deg); 
    -webkit-transform: rotate(7.5deg); 
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); 
     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; 
}

출처

2013-06-08 02:13:59

마이클, 나는 그 라인에서 생각해 봤지만 나던 한 것 같습니다. 귀하의 예제는 텍스트가 HTML 섹션에 있고 그 fillText ID를 가지고있을 때 작동합니다 (여러 번 시도했습니다). 내 텍스트는 함수 내에서 JavaScript 코드로 작성되므로 CSS를 적용하는 방법을 잘 모르겠습니다. 위 gilly3 일 수 있습니다 맞습니까? –

자바 스크립트 CSS 방향 회전

답변

관련 문제