ผ้าใบ html5

 <canvas id = mycanvas width = 400 height = 200>

ค่าเริ่มต้น <sanvas> ผ้าใบแสดงสี่เหลี่ยมผืนผ้าที่ว่างเปล่าไร้ขอบบนหน้า เพื่อที่จะทำให้มันแสดงรูปร่างให้เพิ่มขอบจุดลงไปโดยการกำหนดกฎของสไตล์:

 Canvas {Border: 1px Dashed Black;}

เพื่อให้งานวาดเสร็จสมบูรณ์ก่อนอื่นเราต้องได้รับวัตถุ <anvas> จากนั้นรับบริบทการวาดสองมิติ

การสาธิตตัวอย่างต่อไปนี้ได้มาจากการวาดภาพของภาพวาดเมื่อโหลดหน้าเว็บ:

 <script> window.onload = function () {var canvas = document.getElementById (MyCanvas);

(1) จุดเริ่มต้นคือ (50,50) ด้านล่าง (50,50) และจุดสิ้นสุดคือเส้นตรง (150,150)

 Context.moveto (50, 50);

(2) ตั้งค่าความกว้างและสีของเส้นด้วย linewidth และ strokestyle แอตทริบิวต์

 // line width context.lineWidth = 10; 50);

(3) ตั้งค่ารูปร่างของปลายทั้งสองของเส้น (ประเภทหัวบรรทัด) ด้วยคุณสมบัติ linecap:

1. ก้น: Fangtou (ค่าเริ่มต้น)
2. รอบ: หัวกลม
3. สแควร์: การขยายหัวสี่เหลี่ยม (เอฟเฟกต์คล้ายกับก้น แต่ความยาวของสองบรรทัดของเส้นจะเพิ่มความยาวครึ่งหนึ่งของความกว้างของเส้น)

 var canvas = document.getElementById (Mycanvas); บริบทของการฉีกขาด (50, 50); บริบท; Context.linecap = square;

ตัวอย่างข้างต้นจะเห็นว่าทุกครั้งที่มีการวาดส่วนบรรทัดใหม่วิธีการเริ่มต้น () จะเรียกว่า

หากไม่มีขั้นตอนนี้ทุกครั้งที่คุณเรียกว่า Stroke () คุณจะทำการถอนส่วนบรรทัดเดิมบนผืนผ้าใบอีกครั้ง โดยเฉพาะอย่างยิ่งตัวอย่างข้างต้นแอตทริบิวต์บริบทจะต้องได้รับการแก้ไขเมื่อวาดเส้นใหม่