<strong>1. 브러시 스타일 사용자 정의</strong> <br><br>도형 맵에 색상을 추가하려면 다음 두 가지 중요한 속성을 사용해야 합니다. <br><br>fillStyle: 모든 채우기 작업의 기본 색상을 설정합니다. <br>StrokeStyle: 모든 획 작업에 대한 기본 색상을 설정합니다. <br><br><strong>2. 색상과 투명도를 적용한 직사각형 그리기</strong> <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode33'));"><u>코드 복사</u></span></div> 코드는 다음과 같습니다: </div> <div class="msgborder" id="phpcode33"> <br><!DOCTYPE html> <br><html> <br><head><meta http-equiv="Content-type" content=" text/html; charset = utf-8"> <br><title>HTML5</title> <br><script type="text/javascript" charset = "utf-8"> 🎜>/ /이 함수는 페이지가 완전히 로드된 후에 호출됩니다. <br>function pageLoaded() <br>{ <br>//캔버스 객체에 대한 참조를 가져옵니다. tCanvas 이름은 아래 본문의 id <br>var canvas = document .getElementById('tCanvas'); <br>//캔버스의 2D 그리기 환경 가져오기<br>var context = canvas.getContext('2d'); >//그리기 코드가 여기에 표시됩니다<br>/ /채우기 색상을 빨간색으로 설정<br>context.fillStyle = "red" <br>//빨간색 실선 사각형 그리기<br>context.fillRect(50, 50,100,40);//녹색의 경우 가장자리 색상 설정 <br>context.fillStyle = "green" <br>//녹색 속이 빈 직사각형 그리기<br>context.strokRect(120,100,100,35); 🎜>//rgb()를 사용하여 채우기 색상을 파란색으로 설정 <br>context.fillStyle = "rgb(0,0,255)" <br>//파란색 실선 직사각형 그리기<br>context.fillRect(80,230,100, 40); <br>//채우기 색상을 검은색으로 설정하고 알파 값(투명도)은 0.2입니다. <br>context.fillStyle = "rgba(0,0,0,0.2)" <br>//Draw a 투명한 검정색 단색 직사각형<br>context.fillRect(300,180,100,50 ) <br>} <br></script> <br></head></div><canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;"> <br><!--브라우저가 지원하지 않는 경우 , 다음 글꼴이 표시됩니다.-> <br>팁: 기기가 <canvas> <br></canvas> <br>< /html> <br><br><br><br>3. 그리기 효과<br> <br><br>
