ความคิดเห็น: มีสองรูปแบบหนึ่งคือจังหวะ (เติม) และอีกรูปแบบหนึ่งคือการเติม (จังหวะ) รหัสการใช้งานเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
ก่อนอื่นให้วางองค์ประกอบผ้าใบในหน้า HTML ซึ่งองค์ประกอบของผืนผ้าใบควรมีรหัสแอตทริบิวต์สามตัวความกว้างและความสูง<Canvas> </sanvas>
รับวัตถุ Canvas และรับบริบท var cxt = document.getElementById ('demo'). getContext (2d); โดยที่พารามิเตอร์ 2D เป็นตัวกำหนด
เมื่อคุณเริ่มวาดภาพมีสองรูปแบบหนึ่งเป็นจังหวะและอีกรูปแบบหนึ่งเป็นโรคหลอดเลือดสมอง
รหัส JavaScript:
<ภาษาสคริปต์ = "JavaScript">
var cxt = document.getElementById ('demo'). getContext ("2d");
cxt.beginpath ();
cxt.fillstyle = "#f00";/*ตั้งค่าสีเติม*//
cxt.fillrect (0,0,200,100);/* วาดสี่เหลี่ยมผืนผ้าพารามิเตอร์สองตัวแรกกำหนดตำแหน่งเริ่มต้นสองครั้งสุดท้ายคือความกว้างและความสูงของสี่เหลี่ยมตามลำดับ*//
cxt.beginpath ();
cxt.strokestyle = "#000";/*ตั้งค่าชายแดน*//
cxt.lineWidth = 3;/*ความกว้างของเส้นขอบ*/
CXT.Strokerect (0,120,200,100);
cxt.beginpath ();
cxt.moveto (0,350);
cxt.lineto (100,250);
cxt.lineto (200,300);
cxt.closepath ();/*ขั้นตอนเสริม, ปิดเส้นทางที่วาด*/
cxt.stroke ();
</script>
ภาพการทำซ้ำ: