의견 : 오늘 나는 HTML5의 캔버스를 알게되었고 충전제의 좌표와 크기가 잘못되었다는 것을 알았습니다. 오랫동안 공부 한 후, 나는 캔버스 태그에 캔버스의 너비와 높이가 인화되어야한다는 것을 알았습니다.
FillRect (100,100,100,100) 처음 2 100s는 좌표를 참조하고 마지막 2 100은 너비와 높이를 나타냅니다.오늘 나는 HTML5의 캔버스를 배웠고 충전제의 좌표와 크기가 잘못되었다는 것을 알았습니다. 오랫동안 공부 한 후, 나는 캔버스의 너비와 높이가 캔버스 태그에 인쇄되어야한다는 것을 알았습니다. 오랫동안 우울했습니다.
오류 방법 1 :
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
<스타일>
#mycanvas {
너비 : 200px;
높이 : 200px;
배경 : 노란색;
}
</스타일>
</head>
<body>
<canvas>/canvas>
<cript>
var c = document.getElementById ( 'mycanvas');
var ctx = c.getContext ( "2d");
ctx.fillstyle = '#f36';
ctx.fillRect (100, 100, 100, 100);
</스크립트>
</body>
</html>
잘못된 방법 2 :
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
</head>
<body>
<canvas> </canvas>
<cript>
var c = document.getElementById ( 'mycanvas');
var ctx = c.getContext ( "2d");
ctx.fillstyle = '#f36';
ctx.fillRect (100, 100, 100, 100);
</스크립트>
</body>
</html>
결과 표시 :
올바른 방법 :
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
</head>
<body>
<canvas> </canvas>
<cript>
var c = document.getElementById ( 'mycanvas');
var ctx = c.getContext ( "2d");
ctx.fillstyle = '#f36';
ctx.fillRect (100, 100, 100, 100);
</스크립트>
</body>
</html>