Canvas scale() 메서드
정의와 사용법
scale() 현재 그리기를 확대하거나 축소하는 메서드
주의사항:그리기를 확대하면 모든 이후 그리기도 확대됩니다. 위치도 확대됩니다. 만약 당신이 작성하면 scale(2,2)그렇다면 그리기는 캔버스 왼쪽 상단으로부터 두 배 멀리 위치하게 됩니다.
예제
예제 1
직사각형을 그려서 200%로 확대한 후 다시 직사각형을 그려서 200%로 확대합니다：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
푸시:페이지 하단에 더 많은 예제가 제공됩니다.
문법
context.scale(scalewidth,scaleheight);
매개변수 값
| 매개변수 | 설명 |
|---|---|
| scalewidth | 현재 그리기의 너비를 확대합니다 (1=100%, 0.5=50%, 2=200%, 그 이상). |
| scaleheight | 현재 그리기의 높이를 확대합니다 (1=100%, 0.5=50%, 2=200%, 등). |
더 많은 예제
예제 2
직사각형을 그려서 200%로 확대한 후 다시 직사각형을 그려서 200%로 확대한 다음 다시 직사각형을 그려서 200%로 확대한 후 다시 직사각형을 그려서 200%로 확대합니다：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
브라우저 지원
표에서 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
