HTML5 캔버스 기본 그리기: 직사각형 그리기

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

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

1. Canvas 개체인 요소에 해당하는 DOM 개체를 가져옵니다. CanvasRenderingContext2D 객체를 가져오는 getContext( Canvas 객체의) 메소드

3. 그리기를 위해 CanvasRenderingContext2D 객체를 호출합니다.

직사각형 그리기 ret(), fillRect() 및 스트로크Rect()

•context.ect( x , y , width , height ): 경로만 정의합니다. 직사각형 ;

•context.fillRect( x , y , width , height ): 채워진 직사각형을 직접 그립니다.

•context.strokRect( x , y , width , height ): 직사각형 테두리를 직접 그립니다. 🎜 >

JavaScript 코드

클립보드에 콘텐츠 복사

<스크립트 유형=

"text/javascript"
1. > >
   var context = canvas.getContext(
2. "2d"

   ); 🎜>

 
3. //Rect 메소드 사용

     context.ret(10, 10,190,190); 

4. context.lineWidth = 2;

5. context.fillStyle = "#3EE4CB" >

6. context.StrokeStyle =

   "#F5270B"

   ;

7. context.fill(); 🎜>
context.Stroke(); >

9. //fillRect 메소드 사용

10. context.fillStyle =

    "#1424DE"

    ;

11. context.fillRect(210,10,190,190) 🎜>
 
12. //StrokeRect 메소드

     

13.  context.StrokeStyle = "#F5270B"; 

14. 컨텍스트를 사용합니다. 스트로크Rect(410,10,190,190);

16. //StrokeRect 메소드와 fillRect 메소드를 동시에 사용

17. context.fillStyle = "#1424DE";

18. context.StrokeStyle = " #F5270B";

19. context.StrokeRect(610,10,190,190)

20. context.fillRect(610,10,190,190); >

두 가지 점을 설명해야 합니다. 첫 번째 점은 스트로크() 및 fill()이 그려지기 전과 후의 순서입니다. fill()이 나중에 그려지면 스트로크가 그려질 때입니다. border가 더 크면, 스트로크()로 그린 테두리의 절반이 확실히 가려집니다. ;두 번째 사항: fillStyle 또는 스트로크 스타일 속성을 설정할 때 "rgba(255,0,0,0.2)" 설정 방법을 통해 설정할 수 있습니다. 이 설정의 마지막 매개변수는 투명도입니다.

21. 사각형 그리기와 관련된 또 다른 것이 있습니다: 직사각형 영역 지우기: context.clearRect(x,y,width,height). 수신된 매개변수는 직사각형의 시작 위치와 직사각형의 너비 및 길이를 지웁니다. 위 코드에서 그래픽 그리기 끝에

22. context.clearRect(100,60,600,100);

    을 추가하면 다음 효과를 얻을 수 있습니다.

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