تعليق: اليوم تعلمت أن قماش HTML5 ووجدت أن إحداثيات وحجم FillRect كانت غير صحيحة. بعد الدراسة لفترة طويلة ، وجدت أن عرض وارتفاع القماش يجب أن يضعف في علامة القماش.
FillRect (100،100،100،100) تشير أول مائة عام إلى الإحداثيات ، وتشير آخر م 100 ثانية إلى العرض والارتفاع.تعلمت اليوم قماش HTML5 ووجدت أن إحداثيات وحجم FillRect كانت غير صحيحة. بعد الدراسة لفترة طويلة ، وجدت أن عرض وارتفاع القماش يجب أن يضعف في علامة قماش. الاكتئاب لفترة طويلة.
طريقة الخطأ 1:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> وثيقة </title>
<style>
#mycanvas {
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الخلفية: أصفر.
}
</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> </tanvas>
<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> </tanvas>
<script>
var c = document.getElementById ('mycanvas') ؛
var ctx = c.getContext ("2d") ؛
ctx.fillstyle = '#f36' ؛
CTX.FillRect (100 ، 100 ، 100 ، 100) ؛
</script>
</body>
</html>