// Cavnas에 그림을 그리려면 , JavaScript를 사용해야 합니다 <br> // 2. 그리기 도구 가져오기: 캔버스 태그에서 그리기 개체(컨텍스트 개체)를 가져올 수 있습니다. <br> // 이 개체에는 다양한 그리기 방법과 설정이 적용됩니다. 🎜> var cvs = document.getElementById('cvs'); <br> var ctx = cvs.getContext('2d'); // canvas2d 그리기 도구 가져오기 <br> // 3. 경로를 그립니다. <br> ctx.moveTo(50,50); // "펜"을 이미지의 특정 위치로 이동합니다. <br> ctx.lineTo(150,50) // "펜"을 사용하여 선을 연결합니다. 특정 지점 <br> ctx.lineTo(150,150); <br> ctx.lineTo(50,150); <br> ctx.lineTo(50,50) <br> // 이제 캔버스에는 아무것도 없습니다. ? moveTo와 lineTo는 경로를 그리는 데 사용되기 때문입니다. <br> // 경로는 그리려는 모양이나 선을 설명하는 데 사용되는 "초안"입니다. <br> // 4. 경로를 채우거나 획을 그립니다. <br> // 획이나 채우기 전에 획이나 채우기의 색상을 설정할 수 있습니다. <br> // 캔버스는 "그린 후에 브라우저가 이를 무시"하는 메커니즘입니다. <br> // 따라서 획이나 채우기 스타일을 설정하려면 획이나 채우기 전에 설정해야 합니다 <br> // 이미 획을 그었거나 채웠다면 스타일 설정이 작동하지 않습니다. <br><br> ctx.StrokeStyle = 'lightgreen'; // 획 색상을 녹색으로 설정 <br> ctx.lineWidth = 25; 획 선 너비 <br> ctx.strok(); // 획 <br><br> ctx.fillStyle = 'pink' <br> ctx.fill() // 채우기</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
