ความคิดเห็น: วันนี้ฉันได้เรียนรู้ผืนผ้าใบของ HTML5 และพบว่าพิกัดและขนาดของ Fillrect นั้นไม่ถูกต้อง หลังจากเรียนมาเป็นเวลานานฉันพบว่าความกว้างและความสูงของผืนผ้าใบต้องถูกฝังอยู่ในแท็กผ้าใบ
Fillrect (100,100,100,100) 2 100s แรกอ้างถึงพิกัดและ 2 100 สุดท้ายสุดท้ายอ้างถึงความกว้างและความสูงวันนี้ฉันได้เรียนรู้ผ้าใบของ HTML5 และพบว่าพิกัดและขนาดของ Fillrect นั้นไม่ถูกต้อง หลังจากเรียนมาเป็นเวลานานฉันพบว่าความกว้างและความสูงของผืนผ้าใบจะต้องถูกแทรกเข้าไปในแท็กผ้าใบ หดหู่เป็นเวลานาน
วิธีข้อผิดพลาด 1:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> เอกสาร </title>
<style>
#mycanvas {
ความกว้าง: 200px;
ความสูง: 200px;
ความเป็นมา: สีเหลือง;
-
</style>
</head>
<body>
<Canvas>/Canvas>
<script>
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>
<meta charset = "utf-8">
<title> เอกสาร </title>
</head>
<body>
<Canvas> </sanvas>
<script>
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>
<meta charset = "utf-8">
<title> เอกสาร </title>
</head>
<body>
<Canvas> </sanvas>
<script>
var c = document.getElementById ('Mycanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#f36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>