참고 :이 방법과 관련이있다 최대 크기를 조절할 때 기존의 캔버스 요소를 렌더링 , 하지 선이나 그래픽 렌더링 방법을 함께 할 캔버스 표면에 . 즉, 이것은 크기 가 조정 된 요소의 보간 과 관련이있으며 캔버스에 그려지는 그래픽의 앤티 앨리어싱 과는 아무 관련이 없습니다. 나는 브라우저가 어떻게 선을 그리는지 신경 쓰지 않는다. 크기가 커질 때브라우저가 캔버스 요소 자체를 렌더링하는 방법에 관심이 있습니다.
<canvas>요소 크기를 조정할 때 보간을 비활성화하기 위해 프로그래밍 방식으로 변경할 수있는 캔버스 속성 또는 브라우저 설정이 있습니까? 크로스 브라우저 솔루션이 이상적이지만 필수적인 것은 아닙니다. Webkit 기반 브라우저는 나의 주요 목표입니다. 성능은 매우 중요합니다.
이 질문 은 가장 유사하지만 문제를 충분히 설명하지는 않습니다. 그만한 가치가 있기 때문에 나는 image-rendering: -webkit-optimize-contrast아무 소용이 없었습니다.
이 응용 프로그램은 내가 필요한 것을 명확히하기 위해 HTML5 + JS로 작성된 "복고풍"8 비트 스타일 게임이 될 것입니다.
예를 들면 다음과 같습니다. ( 라이브 버전 )
21x21 캔버스가 있다고 가정합니다.
<canvas id='b' width='21' height='21'></canvas>... 요소를 5 배 더 크게 만드는 CSS가 있습니다 (105x105).
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */캔버스에 다음과 같이 간단한 'X'를 그립니다.
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});왼쪽 이미지는 Chromium (14.0)이 렌더링하는 것입니다. 오른쪽 이미지는 내가 원하는 것입니다 (설명을 위해 손으로 그린 것).
