ความคิดเห็น: บทช่วยสอน HTML5 ตระหนักถึงผลการไล่ระดับสีของ Photoshop โปรดดูที่มัน
<! doctype html> <head>
<meta charset = utf-8>
<title> เส้นวาดรูป HTML5, วงกลม, สี่เหลี่ยมผืนผ้า </title>
<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</head>
<script>
$ (เอกสาร) .ready (function () {
var c = document.getElementById ("drawbox");
var draw = c.getContext ("2d"); // รับการอ้างอิงไปยังเนื้อหา 2D โทรหา drawing api </p> <p> // ระบุบล็อกการไล่ระดับสี
var grd = draw.createlineargradient (50,50,200,50); // พิกัดความยาวและความกว้าง
grd.addcolorstop (0, "ดำ"); // เริ่มสี
grd.addcolorstop (1, "เขียว"); // สีจุดสิ้นสุด </p> <p> draw.fillstyle = grd; // ตั้งเป็นสไตล์การเติม
draw.fillrect (50,50,200,50); // เติมลงในสี่เหลี่ยมผืนผ้า
-
</script>
</body>
<Canvas> </sanvas>
</body>
</html>
ภาพการทำซ้ำ: