Pixel Art Game 용 html 캔버스 안의 요소 조작하기

Question

저는 첫 번째 HTML5 모바일 게임을하고 있는데 이미지 용 픽셀 아트 스타일을 사용하고 있습니다.

내가이 권리를 갖고 있는지 알지 못합니다 ... 처음에는 훨씬 큰 크기의 픽셀 아트 이미지를 만들어서 나중에 장치 화면에 맞게 크기를 조정할 수있었습니다. 그러나 이제는 실제 픽셀을 사용하여 픽셀 아트를 그리고 브라우저에서 크기를 조절할 수있는이 방법을 보았습니다.

약간의 연구를했는데 품질을 잃지 않고 픽셀 아트 이미지를 늘리려면 그 이미지를 HTML 캔버스에 그려야하고 이미지 스무딩을 비활성화해야합니다. 저는 모든 이미지 용 JavaScript에서 이미지 로더를 빌드하고 캔버스에 모든 이미지를로드하고 크기를 조정했습니다 ... 문제 없습니다.

하지만 지금은 어떻게 그 이미지로 작업해야합니까? 그것들은 제가 이해하는 한 요소가 아닙니다 ... 나는 그들에게 클래스 나 id를 할당 할 수 없습니다.

각 이미지마다 캔버스를 만들 예정입니까? 내가이 일을 제대로하고 있습니까?

Answer 1

캔버스에는 자체 규칙이 있습니다. 내부의 요소는 일반 HTML 요소처럼 제어되지 않습니다. 캔버스 API를 살펴보고 필요하지 않은 경우 일반 HTML 설정으로 이미지 작업을 수행하십시오. HTML 캔버스를 사용하지만, 당신이 당신의 페이지에 이미지의 앤티 앨리어싱을 해제하는 링크의 CSS 설정을 시도 할 수 있었다 확실하지

Answer 2

Disable antialising when scaling images

.