HTML canvas scale() 메서드
정의와 사용법
scale() 현재 그리기를 더 크거나 작게 확대할 수 있습니다.
주의사항:그리기를 확대하면, 이후의 모든 그리기도 확대됩니다. 위치도 확대됩니다. scale() 메서드를 사용하면 scale(2,2)그럼 그리기는 캔버스 왼쪽 상단에서 두 배 떨어진 위치에 배치됩니다.
예제
예제 1
다시 그려서 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%，再次绘制矩形：
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> 요소를 지원하지 않습니다.
