캔버스의 "내부"치수를 설정 하시겠습니까?

Question

는 그래서 같은 width 및 height 속성을 설정하여 내 캔버스의 폭과 높이를 설정할 수 있습니다

<canvas id="canvas" width="510" height="510"></canvas> 

하지만이 값에 의존 하드 코드 내 모든 그리기 코드를 원하지 않는다. "internal"너비/높이를 100x100으로 설정하고 그 좌표에있는 모든 것을 그려보고 싶습니다. 그리고 캔버스를 확장합니다 (OpenGL에서와 같은 방식으로). 그렇게하면 캔버스의 크기를 조정해도 멋지게 렌더링됩니다.

캔버스에 CSS 너비와 높이를 설정하면 크기를 늘릴 수 있지만 같은 단위를 유지할 수 있지만 실제로 결과가 늘어나고 뚜렷하고 끔찍한 것으로 나타났습니다. 여전히 벡터처럼 멋지고 선명하게 렌더링됩니다.

이 방법이 있습니까?

Answer 1

"로컬"좌표로 모든 것을 그릴 수 있으며 그릴 때 가장 먼저 할 일은 실제 캔버스의 상대적 크기로 컨텍스트의 크기를 조정하는 것입니다.

예.

HTML

<canvas id="c" width="510" height="510"></canvas> 

JS

var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 

ctx.scale(5.1,5.1); 
// Everything drawn here is in a 100x100 world, 
// but gets scaled to be in the 510x510 canvas 
ctx.fillStyle = '#000'; 
ctx.fillRect(0,0,100,100); 
ctx.strokeStyle= '#F00'; 
ctx.lineWidth = 1; 
ctx.strokeRect(5,5,90,90);​​​​​ 

Running example