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

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

•context.ect( 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!