HTML5로 도트 그림 확대

흐리지 않는 1픽셀을 실현하기 위해

관심이 높은 분이라면, 2013년 6월 9일에 투고된 웹에서 도트 그림 확대 - @wizforest 을, 이미 시험되었다고 생각한다. 이 기사의 결론은 이렇다. canvas 요소에 JavaScript로 묘사하면 가능하다. 그 방법은, 이 기사의 스크립트 인가, 필자의 졸작 를 참고로 해 주었으면 한다.

새로운 문제

캔버스 요소는 style 속성이나 css의 width 속성 등으로 더욱 확대할 수 있지만, 위의 이미지와 같이 확대 시에는 쟈기가 열화된다. 도트 그림이 도트 그림인 정체성을 잃어 버리는 것이다. 이것은 무섭다.

자기를 죽이지 않는 법

픽셀을 path 요소로 변환하고 svg로 저장 그러면 픽셀은 색상을 가진 정사각형으로 모양을 유지하고 확대합니다. path 요소로 변환하려면 d 속성을 사용합니다. 예를 들어, 검은색 1pixel 이미지 파일은 다음과 같이 표현할 수 있다.

<svg viewBox="0 0 1 1" shape-rendering="crispEdges">
  <path d="M0,0h1v1h-1Z" fill="rgba(0,0,0,1.00)"></path>
</svg>

위의 코드를 html 파일로 저장하면 브라우저에서 열면 화면의 너비가 가득 검은 사각형이 표시됩니다.

style 속성이나 css로 width 속성을 지정하면 화면비를 유지한 채 확대·축소할 수 있다.

라이브러리화

이상을 수동으로하면 뼈가 부러지고 복잡한 골절이 발생하기 때문에 jaggy.js를 git에 업로드했습니다.
즐거운 점 그림 라이프를.