コメント：今日、私はHTML5のキャンバスを学びましたが、fill -rectの座標とサイズが正しくないことがわかりました。長い間勉強した後、キャンバスの幅と高さをキャンバスタグにインラキングする必要があることがわかりました。
FillRect（100,100,100,100）最初の200秒は座標を参照し、最後の200秒は幅と高さを参照します。今日、私はHTML5のキャンバスを学びましたが、充填直腸の座標とサイズが正しくないことがわかりました。長い間勉強した後、キャンバスの幅と高さをキャンバスタグにインラキングする必要があることがわかりました。長い間落ち込んでいます。
エラー方法1：
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
<style>
#mycanvas {
幅：200px;
高さ：200px;
背景：黄色。
}
</style>
</head>
<body>
<canvas>/canvas>
<スクリプト>
var c = document.getElementById（ 'mycanvas'）;
var ctx = c.getContext（ "2d"）;
ctx.fillstyle = '＃f36';
ctx.fillrect（100、100、100、100）;
</script>
</body>
</html>
間違った方法2：
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
</head>
<body>
<canvas> </canvas>
<スクリプト>
var c = document.getElementById（ 'mycanvas'）;
var ctx = c.getContext（ "2d"）;
ctx.fillstyle = '＃f36';
ctx.fillrect（100、100、100、100）;
</script>
</body>
</html>
結果を表示：
正しい方法：
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> document </title>
</head>
<body>
<canvas> </canvas>
<スクリプト>
var c = document.getElementById（ 'mycanvas'）;
var ctx = c.getContext（ "2d"）;
ctx.fillstyle = '＃f36';
ctx.fillrect（100、100、100、100）;
</script>
</body>
</html>