HTML5 캔버스는 브라우저 기반 확대/축소를 지원합니까?

Question

fillText가 그려진 간단한 캔버스를 설치했습니다. 꽤 괜찮은 것처럼 보이지만 브라우저에서 제공하는 확대/축소 기능 (Safari, Firefox)을 사용하면 앤티 앨리어싱이보기 흉하게 보입니다.

눈금을 올리려고했는데 도움이되지 않습니다.

확대 된 브라우저 창에서도 선명하게 보일 수있는 캔버스를 그릴 방법이 있습니까?

---

스크린 샷 (NO 줌) : http://i.stack.imgur.com/CGWka.png

스크린 샷 (최대 줌) : http://i.stack.imgur.com/vNPjF.png

Answer 1

당신은 '줌'항목에서 결과에 명령을 그리기 전에 캔버스 컨텍스트를 확장하여 캔버스에 그려진 수 있습니다 더 큰 크기로, 부드럽게. 예를 들어, 드로잉 항목을 확대하고 기본 프레젠테이션에서 사용할 수없는 세부 정보를 볼 수있는 this example of mine을 참조하십시오.

브라우저 확대/축소와 관련된 문제는 JPG 또는 PNG와 같은 HTML5 캔버스가 SVG와 달리 개별 픽셀을 기반으로한다는 점입니다. 10 픽셀로 원을 그려 브라우저에 50 픽셀로 확대하도록 지시하면 브라우저는 데이터를 "발명하여"부드러운 원을 그릴 수 없습니다. 가장 좋은 방법은 이미지 보간을 통해 '큰 픽셀'을 약간 매끄럽게 보이도록 만드는 것입니다.

이미지와 솔루션

, 당신은 (예를 들어, 1000x800) 픽셀의 많은 사진을 촬영하고 다른, 더 작은 크기 (예 : 250x200)에서 표시 할 브라우저를 알 수 있습니다. 브라우저가 확대되면 에 픽셀이 더 표시됩니다. 예 :

<img src="1000x800.jpg" style="width:250px; height:200px"> 

캔버스에서 동일한 작업을 수행 할 수 있습니다. 캔버스에있는 데이터의 픽셀 수는 height 및 width 속성 (HTML 또는 JavaScript)으로 지정됩니다. CSS 디스플레이 크기 (위와 같음)을 더 작은 크기로 개별적으로 지정할 수 있습니다. 기존 캔버스 드로잉 코드를 수정할 필요조차 없습니다. 단순히 :

1. 는 특정 요인에 의해 height과 캔버스의 width (예 : 4),
2. 를 사용하여 CSS가 모든 전에 다음
3. 를 표시 높이를 설정하고 다시 원래 크기로 폭 및 적응 다른 그리기 명령은 ctx.scale(4,4)으로 컨텍스트를 확대합니다.

편집은 : 추가 보너스로

:

여기

는 당신이 확대 될 때의 모습입니다
http://jsfiddle.net/u5QPq/embedded/result/ (code) : 여기이의 예를 만들었습니다 , 캔버스는 더 부드럽게 인쇄됩니다 (누군가가 나무를 죽이는 경우를 대비해서).