캔버스 드로잉을 줌하는 방법

캔버스 드로잉을 확대 또는 축소하려고하는데, 컨텍스트 만 크기를 조정하면 아무 일도 일어나지 않습니다.

규모 이후에 다시 그릴 필요가 있습니까? 확대 또는 축소하려고 할 때마다 그것을 그리지 않고 컨텍스트를 직접 확장 할 수있는 방법이 있습니까?캔버스 드로잉을 줌하는 방법

PS : 스크립트로 제어되는 HTML5 <input type="range">으로 확대/축소하고 싶습니다. 이미 작동하고 있습니다.

출처

2016-10-04 dMar

예, 매번 다시 그려야합니다. 이 문제를 해결할 방법이 없습니다. 이것은 실제로 좋은 일입니다. 매번 다시 그리지 않고도 캔버스에서 많은 변형을 수행 할 수 있기 때문입니다. 그렇게했다면 고강도 게임과 애니메이션이 불가능합니다. –

아니요, 매번 다시 그릴 필요가 없습니다. 너비와 높이 속성 만 남겨두고 CSS를 사용하여 전체를 확대/축소합니다. –

이렇게 : https://jsfiddle.net/43ejq0op/ –

최고의 솔루션을 묘화하는이.CSS로 확대/축소하는 것은 해결책이지만 품질에는 큰 손실이 있습니다.

출처

2016-10-27 06:08:40 dMar

내가 다른 question I already answered today에서 내 대답을 복사 해요 ..

캔버스는 이미지와 같습니다. 그것은 자체 물리적 차원이지만 CSS로 여전히 확장 할 수 있습니다. width 및 height 속성을 사용하여 물리적 치수를 설정 한 다음 CSS를 사용하여 % ~ ~~으로 크기를 조절하여~~ 줌으로 조정하십시오.

예 ...

여기

지나치게 단순화 된 예이다

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="width:100%;"></canvas>

: 마이크 말했듯 https://jsfiddle.net/43ejq0op/

출처

2016-10-04 17:50:09

이것은 효과가 있지만, 예제에서 볼 수 있듯이 추악한 픽셀 화로 이어집니다. 그다지 중요하지 않다면 훌륭한 해결책입니다. 그렇지 않으면, OP는 전체 장면 (또는 적어도 스케일 된 부분 집합)을 다시 그려야합니다. –

캔버스 드로잉을 줌하는 방법

답변

관련 문제