HTML5 캔버스 기본 그리기 그리기 그림자 효과

는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 이 기사에서는 주로 HTML5 캔버스의 기본 그리기 방법을 자세히 소개합니다.

는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 사실 이 태그는 특별하다는 점에서 다른 태그와 동일합니다. 태그는 CanvasRenderingContext2D 개체를 얻을 수 있으며 JavaScript 스크립트를 통해 그리기 개체를 제어할 수 있습니다.

는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이와 너비도 갖습니다. 속성. > 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인 요소에 해당하는 DOM 개체를 가져옵니다. CanvasRenderingContext2D 객체를 가져오는 getContext( Canvas 객체의) 메소드
3. 그리기를 위해 CanvasRenderingContext2D 객체를 호출합니다.

그림자 그리기:

• shadowColor 그림자에 사용되는 색상을 설정하거나 반환합니다.

• shadowBlur 그림자에 사용되는 흐림 수준을 설정하거나 반환합니다(값이 클수록 더 흐려집니다).

• shadowOffsetX 그림자와 모양 사이의 수평 거리를 설정하거나 반환합니다.

• shadowOffsetY 그림자와 모양 사이의 수직 거리를 설정하거나 반환합니다.

앞서 그린 오각별에

그림자를 추가해 보겠습니다

JavaScript 코드 클립보드에 콘텐츠 복사

1. var canvas = document.getElementById("canvas")

2. var context = canvas.getContext("2d")

3. context.beginPath ( ; > (

   var

   i = 0; i < 5; i++) {

4. context.lineTo(Math.cos((18+i*72) /180 *Math.PI)*200+200,                                                                                                           

context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,

5. -Math .sin((54+i*72)/180*Math.PI)*80+200)

}
context.closePath()
8. //테두리 스타일 및 채우기 색상 설정

9. context.lineWidth=

   " 3"
;
context.fillStyle =
11. "#F6F152"

    ; 🎜>

context.StrokeStyle =
12. "#F5270B"

    ; .shadowOffsetX = 30;

    context.shadowOffsetY = 30; 🎜>
13. context.shadowBlur = 2;

    context.fill()

context.Stroke();
14. 효과는 다음과 같습니다.

위 내용은 HTML5 캔버스 기본 그리기 그리기 그림자 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!