먼저 html 페이지에 캔버스 요소를 배치합니다. 여기서 캔버스 요소에는 ID, 너비, 높이의 세 가지 속성이 있어야 합니다. 코드 복사코드는 다음과 같습니다. 캔버스 객체를 가져오고 컨텍스트를 가져옵니다. var cxt=document.getElementById('demo').getContext( "2d") 매개변수 2d가 결정됩니다. 그리기 시작에는 두 가지 형태가 있습니다. 하나는 채우기이고 다른 하나는 획입니다. 자바스크립트 코드: 코드 복사코드는 다음과 같습니다. <br>var cxt=document.getElementById('demo').getContext("2d") <br>cxt.beginPath(); ="# F00";/*채우기 색상 설정*/ <br>cxt.fillRect(0,0,200,100);/*사각형을 그립니다. 처음 두 매개변수는 시작 위치를 결정하고 마지막 두 매개변수는 너비와 높이입니다. 직사각형*/ <br>cxt.beginPath(); <br>cxt.StrokeStyle="#000";/*테두리 설정*/ <br>cxt.lineWidth=3;/*테두리 너비*/ cxt.closePath();/ *선택적 단계, 그려진 경로 닫기*/ <br>cxt.Stroke() <br> 렌더링:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
