의견 : 두 가지 형태가 있습니다. 하나는 스트로크 (채우기)이고 다른 하나는 채우기 (스트로크)입니다. 특정 구현 코드는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
먼저 HTML 페이지에 캔버스 요소를 배치합니다. 여기서 캔버스 요소에는 3 개의 속성 ID, 너비 및 높이가 있어야합니다.<canvas> </canvas>
캔버스 객체를 가져 와서 컨텍스트 var cxt = document.getElementById ( 'demo'). getContext (2d); 여기서 매개 변수 2D가 결정적입니다.
그리기를 시작하면 두 가지 형태가 있습니다. 하나는 스트로크이고 다른 하나는 스트로크입니다.
자바 스크립트 코드 :
<script language = "javaScript">
var cxt = document.getElementById ( 'demo'). getContext ( "2d");
cxt.beginpath ();
cxt.fillstyle = "#f00";/*채우기 색상*/
cxt.fillRect (0,0,200,100);/* 사각형을 그리십시오. 처음 두 매개 변수는 시작 위치를 결정하고 마지막 두 가지는 각각 사각형의 너비와 높이입니다*/
cxt.beginpath ();
cxt.strokestyle = "#000";/*세트 테두리*/
cxt.linewidth = 3;/*테두리 너비*/
CXT.Strokerect (0,120,200,100);
cxt.beginpath ();
CXT.Moveto (0,350);
cxt.lineto (100,250);
cxt.lineto (200,300);
cxt.closepath ();/*선택적 단계, 그려진 경로를 닫으십시오*/
cxt.stroke ();
</스크립트>
생식 이미지 :