HTML5 캔버스 - 간단한 직사각형과 삼각형 그리기 예제 code_html5 튜토리얼 기술

먼저 html 페이지에 캔버스 요소를 배치합니다. 여기서 캔버스 요소에는 ID, 너비, 높이의 세 가지 속성이 있어야 합니다.

코드 복사

코드는 다음과 같습니다.

캔버스 객체를 가져오고 컨텍스트를 가져옵니다. var cxt=document.getElementById('demo').getContext( "2d") 매개변수 2d가 결정됩니다.

그리기 시작에는 두 가지 형태가 있습니다. 하나는 채우기이고 다른 하나는 획입니다.

자바스크립트 코드:

코드 복사

코드는 다음과 같습니다.

<script> <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 /></script>


렌더링: