2011-08-16 8 views
5

캔버스에 텍스트를 그려야하지만 현재 fillText 구현은 필자가 필요로하는 많은 기능을 복잡하게 만듭니다 (여러 줄을 그릴 수있는 것처럼).캔버스에 텍스트 그리기

나중에 캔버스에서 픽셀을 복사해야하므로 캔버스에서 그려야하며 캔버스 위에는 span 요소 일 수 없습니다.

편집 가능하게 만드는 것은 장점이지만 필수는 아닙니다.

캔버스에 텍스트를 그리는 고급 기능을 제공하는 라이브러리가 있습니까? 이 도움이

+0

[Fabric.js (http://kangax.github.com/fabric.js/demos/kitchensink/) 보유지지 말할 수 텍스트 및 다양한 텍스트 옵션 (기울임 꼴, 밑줄, 획 건너기, 그림자) – kangax

답변

2

http://www.canvastext.com/

희망을 (그것은 IE9, 파이어 폭스, 크롬과 오페라에 적어도 일해야한다).

+0

완벽! 고맙습니다! –

0

나는 단지 FLOT Canvas Text plugin for jquery에 대해 알고 있습니다.

하지만 검색 엔진 친화적이기 때문에 나는 여전히 <span>을 사용합니다. 객체에 따라 element.innerHTML 또는 element.innerText를 사용하여 스팬 (또는 대부분) 요소의 텍스트를 쉽게 가져올 수 있습니다. 그럼 당신은 그것을 처리/통과 할 수 있습니다. 예 : 스팬에 대해 같은

<span id="myspan"> lorem ipsum </span> 

제가

위한 여러
spanText = document.getElementById("myspan").innerText; 
+0

나는 그것을 살펴볼 것이다. 캔버스가 이미지 서비스에 업로드 될 것이므로 에 관해서는 캔버스에서 렌더링해야합니다. –

+0

플러그인이 있습니다 : HTMLtoCanvas (http://html2canvas.hertzen.com/). DOM을 전달하면 javascript 만 사용하여 캔버스 스냅 샷을 로컬에서 생성합니다. 그런 다음 캔버스에서 스크린 샷을 제출할 수 있습니다.하지만 제게는 모든 것을 서버 사이드에서 시작하는 것이 더 합리적입니다. – mrBorna