는 그래픽을 그리는 데 사용되는 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"> > var context = canvas.getContext("2d"); 🎜> //Rect 메소드 사용 context.ret(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"; 컨텍스트를 사용합니다. 스트로크Rect(410,10,190,190); //StrokeRect 메소드와 fillRect 메소드를 동시에 사용 context.fillStyle = "#1424DE"; context.StrokeStyle = " #F5270B"; context.StrokeRect(610,10,190,190) context.fillRect(610,10,190,190); > 두 가지 점을 설명해야 합니다. 첫 번째 점은 스트로크() 및 fill()이 그려지기 전과 후의 순서입니다. fill()이 나중에 그려지면 스트로크가 그려질 때입니다. border가 더 크면, 스트로크()로 그린 테두리의 절반이 확실히 가려집니다. ;두 번째 사항: fillStyle 또는 스트로크 스타일 속성을 설정할 때 "rgba(255,0,0,0.2)" 설정 방법을 통해 설정할 수 있습니다. 이 설정의 마지막 매개변수는 투명도입니다. 사각형 그리기와 관련된 또 다른 것이 있습니다: 직사각형 영역 지우기: context.clearRect(x,y,width,height). 수신된 매개변수는 직사각형의 시작 위치와 직사각형의 너비 및 길이를 지웁니다. 위 코드에서 그래픽 그리기 끝에 context.clearRect(100,60,600,100);을 추가하면 다음 효과를 얻을 수 있습니다.
