HTML5 캔버스 기본 그리기에서 사각형을 그리는 샘플 코드에 대한 자세한 설명

<canvas>는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. HTML5 캔버스에서 직사각형을 그리는 기본적인 그리기 방법 소개에 관심 있는 친구들은

를 참고하세요. 그래픽을 그리는 컨테이너에는 id, class 및 스타일과 같은 속성 외에도 height 및 width 속성도 있습니다. > 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인

DOM 개체 를 가져옵니다. 2. Canvas 개체의 getContext() 메서드를 호출하여 CanvasRenderingContext2D 개체를 가져옵니다.
3. 그리기를 위해 CanvasRenderingContext2D 개체를 호출합니다.

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

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

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

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
  
    //使用rect方法   
    context.rect(10,10,190,190);   
    context.lineWidth = 2;   
    context.fillStyle = "#3EE4CB";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();   
  
    //使用fillRect方法   
    context.fillStyle = "#1424DE";   
    context.fillRect(210,10,190,190);   
  
    //使用strokeRect方法   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(410,10,190,190);   
  
    //同时使用strokeRect方法和fillRect方法   
    context.fillStyle = "#1424DE";   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(610,10,190,190);   
    context.fillRect(610,10,190,190);   
</script>

여기서 두 가지 사항을 설명해야 합니다. 첫 번째 사항은 fill()이 그려지는 전후의 순서입니다. 나중에 그려지면 획 테두리가 더 커지면 분명히 획()으로 그린 ​​테두리의 절반을 덮게 됩니다. 두 번째 점: fillStyle 또는 획 스타일 속성을 설정할 때 "rgba(" 설정 방법을 통해 설정할 수 있습니다. 255,0,0,0.2)". 이 설정의 마지막 매개변수는 투명도입니다.

직사각형 그리기와 관련된 또 다른 것이 있습니다: 직사각형 영역 지우기: 컨텍스트.

clear

Rect(x,y,width,height). 수신된 매개변수는 직사각형의 시작 위치와 직사각형의 너비 및 길이를 지웁니다. 위 코드에서 그래픽 그리기 끝에

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

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

위 내용은 HTML5 캔버스 기본 그리기에서 사각형을 그리는 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!