<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> <br> <br><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> <br><canvas width="500" height="300" id="tCanvas" style="border:black 1px solid;"> <br></canvas> </div>