HTML5 Canvas: แนะนำให้รู้จักด้วยการวาดเส้นตรง 2D ต่อเนื่องกันเป็นรูป Zigzag

เกริ่นนำ

สำหรับบทความนี้ ผมตั้งใจจะอธิบาย และแสดงวีธีวาดเส้นต่อเนื่องกัน 2 มิติ โดยใช้ตัวอย่างวิธีการวาดเส้นต่อกันให้มีรูปแบบ Zigzag ในเอกสาร HTML เพื่อแสดงผลบน browser ด้วย HTML5 Canvas วาดออกมาแล้วจะเหมือนรูปข้างล่างนี้

ลงมือทำ… Action!

1. สำหรับตัวอย่างนี้ผมใช้ jQuery ช่วยด้วยนะครับ download jQuery มาเตรียมไว้ก่อน ได้จาก http://jquery.com/

2. สร้าง file HTML ใหม่ตั้งชื่อว่า draw_zigzag.html ครับ

3. เขียน code เริ่มต้นเอกสาร HTML  ตามข้างล่างนี้ลงไป ก่อนครับ

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>

<canvas id=”myCanvas” width=”600″ height=”250″ style=”border:1px solid black;” />

</body>

</html>

จาก code HTML ข้างบนผมได้เตรียมวัตถุ canvas ที่แสดงด้วย tag <canvas> กำหนดให้ id เท่ากับ myCanvas ขนาด 600 x 250 ไว้ เพื่อเตรียมขีดเขียนรูป zigzag ของเราไว้เรียบร้อยแล้ว

ลำดับต่อจากนี้ไปก็จะเป็นในส่วนของ logic JavaScript ที่ผมจะวาดเส้นต่อกันให้เป็นรูป zigzag กันละครับ

4. ไปที่ล่างสุดของเอกสาร draw_zigzag.html เขียน code เพื่อ reference ถึง jQuery library  แบบนี้

<script src=”jquery-1.7.1.min.js” type=”text/javascript”></script>

5. เปิด scope code เพื่อเขียน javascript แบบนี้

<script type=”text/javascript”>

$(function () {

//เดี๋ยวจะเติม code เพื่อวาดเส้น zigzag เข้าไปในนี้…

});

</script>

6. ภายใน scope function ready ของ document ( $(function () { ) ให้เลือก myCanvas โดย jQuery selector แบบนี้

var canvas = $(‘#myCanvas’)[0];

7. เอา context จาก canvas ที่ได้มาจากข้อ 6 เพื่อเตรียมวาดงานศิลปะ 2 มิติ (2d)ของเราครับ แบบนี้

var context = canvas.getContext(“2d”);

8. เริ่มต้นค่า parameter ให้กับ context เพื่อวาดเส้น zigzag ตามนี้ครับ

var startX = 85;
var startY = 70;

var zigzagSpacing = 60;

context.lineWidth = 10;
context.strokeStyle = “blue”;
context.beginPath();
context.moveTo(startX, startY);

9. เขียน logic เพื่อเตรียมวาดเส้น zigzag แบบนี้ครับ

for (var n = 0; n < 7; n++) {

var x = startX + ((n + 1) * zigzagSpacing);
var y;
if (n % 2 == 0) { // ถ้า  n เป็น คู่…

y = startY + 100;

}

else { // ถ้า  n เป็น คี่…

y = startY;

}
context.lineTo(x, y);

}

10. ขั้นตอนท้ายสุด ก็เขียนเส้นครับ แบบนี้

context.stroke();

สรุป JavaScript code ได้เป็น

<script type=”text/javascript”>

$(function () {

var canvas = $(‘#myCanvas’)[0];
var context = canvas.getContext(“2d”);

var startX = 85;
var startY = 70;

var zigzagSpacing = 60;

context.lineWidth = 10;
context.strokeStyle = “blue”;
context.beginPath();
context.moveTo(startX, startY);

for (var n = 0; n < 7; n++) {

var x = startX + ((n + 1) * zigzagSpacing);
var y;
if (n % 2 == 0) {

y = startY + 100;

}
else {

y = startY;

}
context.lineTo(x, y);

}
context.stroke();

});

</script>

HTML5 Canvas ทำงานยังไง

ผมกำหนดให้เริ่มต้นวาดเส้น zigzag ที่จุด (85, 75) กำหนดให้ ระยะห่างระหว่าง zigzag เท่ากับ 60 ให้ขนาดตวามหนาของเส้นเท่ากับ 10

และให้วาดเส้นด้วยสีฟ้า ผมเริ่มการวาดด้วยคำสั่ง beginPath ก่อน คำสั่งนี้เป็นการระบุให้ context วาดเส้นต่อเนื่องกันไปจุดต่อจุด (คือไม่ยกมือขึ้นเมื่อวาดเส้นหนึ่งเสร็จ)

ต่อมาผมใช้คำสั่ง moveTo เพื่อระบุให้ context ไปที่จุดเริ่มต้นวาดเส้น หลังจากนั้นก็เริ่มวนซ้ำเพื่อวาด zigzag ทั้งหมด 7 เส้น

โดย แต่ละรอบคำนวณความห่างของจุด x ห่างเพิ่มขึ้นทีละ 60 และจุด y จะขึ้นลงเพื่อ zigzag ขึ้นอยู่กับว่ารอบนั้นเป็นเลขคู่ หรือเลขคี่

เมื่อคำนวณเรียบร้อยแล้วผมวาดเส้นไปที่จุด x, y ด้วยคำสั่ง lineTo ทำซ้ำไปจนกระทั้งจบการวาดเส้นทั้ง 7 รอบ

แล้วผมก็ตบท้ายด้วยการแสดงงานศิลนี้ด้วยคำสั่ง stroke

ถ้าอ่านแล้วยังงงๆอยู่ ก็ดูภาพประกอบด้านล่างนี้ครับ

จบแล้วครับการนำเสนอวิธีใช้งาน HTML5 Canvas ผมเริ่มต้นด้วยพื้นฐานวิธีวาดเส้นตรง 2D ให้เป็นรูปแบบ zigzag ง่ายๆก่อนบทความต่อๆไปในหัวข้อเรื่อง HTML5 Canvas นี้ของผมก็จะเพิ่มตวามซับซ้อนของงานศิลขึ้นไปอีกเรื่อยๆนะครับ

แหล่งข้อมูล: HTML5 Canvas Cookbook

ขอบคุณครับ

#:P

Advertisements

#html5, #javascript