HTML5 캔버스 상태

우리는 캔버스에 그림을 그릴 때, 자주 save()와 restore()를 통해 변경합니다.2D 상태. 예를 들어, 직선이나 사각형을 그릴 때는 한 가지 strokeStyle가 필요하며, 다음 직선이나 사각형을 그릴 때는 다른 strokeStyle가 필요합니다. 또는 다른 채우기 색상, 회전 각도 등.

그의2HTML5캔버스에 그리는 동안, 이2D 상태가 어떤 상태에 있어야 합니다. 여기에는2D 상태 속성(예: fillStyle와)를 사용하여 이 상태를 strokeStyle로 설정합니다. 모든 이러한 작업은 총칭으로2D 상태.
보통, 캔버스에 그림을 그릴 때, 그리는 과정에서 변경해야 합니다.2D 상태의 위치. 예를 들어, strokStyle는 일반적인 선이나 사각형에 대해 필요할 수 있으며, 다른 선이나 사각형에 대해 다른 strokeStyle가 필요할 수 있습니다. 또는 다른 색상 순환, 또는 다른.
각각의 형상을 그리기 전에 완전한 상태를 설정하는 것은 매우 번거롭기 때문에, 상태를 상태 스택에 넣을 수 있습니다. 그런 다음, 이 상태 스택에서 가장 먼저 넣은 상태를 빼낼 수 있습니다. 이는 일시적인 상태 변경 후 이전 상태를 빠르게 복원하는 방법입니다.

HTML5 Canvas 캔버스 상태 예제

그리기 상태를 스택에 넣고 빼낼 방법은 다음과 같습니다:

context.save();　　　　　//　하나의 상태를 상태 스택에 넣습니다.
context.restore();　　//　가장 앞의 상태를 스택에서 빼내어 설정에 적용합니다.2d上下문.

스택에 저장된 후, 여러 상태를 스택에 넣어 그것을 빼낼 수 있습니다. 이는 다음과 같은 코드 예제입니다:

<canvas　id="ex1"　width="500"　height="100"　style="border:　1px　solid　#cccccc;">HTML5　Canvas　not　supported</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.fillStyle　　="#66ff66";
context.strokeStyle="#990000";
context.lineWidth　　=　5;
context.fillRect　　(5,　5,　50,　50);
context.strokeRect(5,　5,　50,　50);
context.save();
context.fillStyle　=　"#6666ff";
context.fillRect　　(65,　5,　50,　50);
context.strokeRect(65,　5,　50,　50);
context.save();
context.strokeStyle　=　"#000099";
context.fillRect　　(125,　5,　50,　50);
context.strokeRect(125,　5,　50,　50);
context.restore();
context.fillRect　　(185,　5,　50,　50);
context.strokeRect(185,　5,　50,　50);
context.restore();
context.fillRect　　(245,　5,　50,　50);
context.strokeRect(245,　5,　50,　50);
</script>

이는 캔버스에 그리는 동안 위의 코드의 결과입니다:

상태 스택의 용도

캔버스 합성 모드나 변환 설정을 변경하려고 하고, 변경하기 전에 설정으로 돌아가고 싶을 때, 상태 스택은 매우 유용합니다. 구성 모드나 변환 설정을 저장하고 복원함으로써, 올바르게 재설정할 수 있도록 보장할 수 있습니다. 그렇지 않으면, 이전의 정확한 설정으로 돌아가기가 어려울 수 있습니다.

2D上下문의 상태는 무엇인가요?

모든2D上下문 속성은 상태 저장 및 복원의 일부입니다. 그러나, 캔버스에 그린 것은 아닙니다. 이는 상태 복원 시, 그리기 영역 자체를 복원하지 않는다는 것을 의미합니다. 복원할 수 있는 것은2D上下文 설정(속성 값). 이 설정은 다음과 같습니다:

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• 잘라내기 영역

• 변환 행렬 (context.rotate()+ 회전+이동 context.setTransform())

이 목록은 완전하지 않습니다. 표준의 발전에 따라 더 많은 속성이 추가될 수 있습니다.2D 컨텍스트 상태의 일부.