HTML 캔버스 scale() 메서드
예시
직사각형을 그리고 200%로 확장한 다음 직사각형을 다시 그립니다.
자바스크립트:
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);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| scale() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
scale() 메서드는 현재 도면의 크기를 더 크거나 작게 조정합니다.
참고: 도면의 크기를 조정하면 향후 모든 도면의 크기도 조정됩니다. 포지셔닝도 조정됩니다. scale(2,2); 그림은 지정한 대로 캔버스의 왼쪽과 위쪽에서 두 배 떨어진 위치에 배치됩니다.
| 자바스크립트 구문: | 컨텍스트 .scale( scalewidth,scaleheight ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) |
더 많은 예
예시
사각형 그리기, 200%로 크기 조정, 다시 사각형 그리기, 200%로 크기 조정, 사각형 다시 그리기, 200%로 크기 조정, 사각형 다시 그리기:
자바스크립트:
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);
❮ HTML 캔버스 참조