ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 3 HTML5 Canvas
   Canvas  คือ Tag ตัวหนึ่งใน HTML5 ซึ่งเป็นคำสั่งใช้ในการสร้างงานกราฟฟิก จะมี Tag สั้นๆ จำง่ายๆ ก็คือ <canvas></canvas>
ข้อดีของ แท็ก Canvas
    ช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
   ลักษณะของ canvas แตกต่างจากภาพชนิดอื่นๆ คือ มันไม่ได้จะแสดงได้เป็นภาพนิ่งเท่านั้น แต่มันสามารถเป็นภาพเคลื่อนไหวได้ด้วย และก็ไม่ได้เกิดจากการเรียกไฟล์ภาพขึ้นมาแสดงตรงๆ แต่เป็นการสั่งโดย javascript ทุกๆเส้นหรือทุกๆจุด และทุกๆการเคลื่อนไหวที่เกิดภายใต้ <canvas> เกิดจากการสั่งงานโดย javascript ทั้งสิ้น แล้วนำเข้ามาโชว์ด้วยการเรียกผ่าน id ของ <canvas> เข้าไป

1.การสร้างกรอบสี่เหลี่ยม

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink;"></canvas>

ตัวอย่างที่ 1 การสร้างกรอบสี่เหลี่ยม

<html>
<body>

<canvas id="ExCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

</body>
</html>

ผลลัพธ์ที่ได้คือ

   จาก HTML ด้านบน เป็นการเรียกให้ canvas id=ExCanvas มาแสดง โดยกำหนดพื้นที่ในการแสดงกว้าง 200 px และสูง 100 px มีกรอบล้อมรอบสีชมพูหนา 5 px
ในกรณีที่ browser ที่ใช้ไม่ support <canvas> จะขึ้นข้อความ Your browser does not support the canvas element

2.การสร้างรูปสี่เหลี่ยม

<script>
  ctx.rect(x, y, width, height);
</script>

จากดครงสร้างด้านบน 
   ใช้ rect() ในการสร้างรูปสี่เหลี่ยม และวางตำแหน่งรูปที่จุด x,y  โดยให้รูปขนาด กว้างและยาว เป็น width , height

ตัวอย่างที่ 2 การสร้างรูปสี่เหลี่ยม

<html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

ผลลัพธ์ที่ได้คือ
  
    จากตัวอย่างที่ 2 จะเห็นว่าชุดคำสั่ง JavaScript ชุดนี้ได้เข้าถึง Element ที่ ID ที่ชื่อว่า myCanvas นั้นเอง สังเกตได้จากบรรทัด
var c=document.getElementById("myCanvas");  (myCanvas ในที่นี้คือตัวกรอบสีชมพูที่เราสร้างไว้ก่อนแล้ว)
   จากนั้นเมื่อหา Element ดังกล่าวเจอก็จะทำการสร้าง context object ขึ้นมา
var cxt=c.getContext("2d");  คำสั่งบรรทัดนี้ ตรง getContext(?2d?) เป็น built-in object ที่มาพร้อมกับ HTML5 ซึ่งจะประกอบไปด้วยคำสั่งต่างๆ เช่น คำสั่งวาดเส้นตรง วงกลม รูปสี่เหลี่ม ตัวหนังสือ รูปภาพ หรืออื่นๆ

    ต่อมาก็เป็นการสร้างรูปสี่เหลี่ยมพื่นภาพสีแดงขึ้นมา
fillStyle นั้นเป้นการกำหนดสีแดงลงไป ส่วน fillRect เป็นการกำหนด รูปร่าง ตำแหน่ง แล้วก็ขนาดของวัตถุ

cxt.fillStyle="red";
cxt.fillRect(0,0,150,75);
    
    ในที่นี้ cxt.fillRect(0,0,150,75); นี่หมายถึง รูปอยู่ที่จุด (x,y)=(0,0)  และมีขนาดกว้าง 150 px ,  ยาว 75 px
***(cxt. หรือ context.  เป็นชุดคั่งสั่งของ JavaScript)

3.การสร้างเส้นตรง

<script>
  ctx.beginPath();
  cntx.moveTo(x,y);
  cntx.lineTo(x,y);
  cntx.stroke();
  ctx.closePath();
</script>

ตัวอย่างที่ 3 การสร้างเส้นตรง

<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.closePath();
</script>

</body>
</html>

ผลลัพธ์คือ


4.การสร้างวงกลม

<script>
  cntx.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>

ตัวอย่างที่ 4 การสร้างรูปวงกลม

<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

ผลลัพธ์ที่ได้คือ


5.การใส่ต้วอักษร

<script>
  cntx.font = 'italic 40px Calibri';
  cntx.fillText(str, x, y);
</script>

จากโครงสร้างด้านบน
   ใช้ font() ในการสร้าง ตัวอักษร  ในตัวอย่างนี้เป็นอักษรแบบ italic (สามารถเลือกเปลี่ยนเป็น bold หรือ normal ก็ได้) ขนาด 40 px
ใช้แบบอักษร เป็น  Calibri
ลักษณะเป็นแบบ fillText (สามารถเลือกเปลี่ยนเป็น strokeText คือ แบบที่มีเฉพาะเส้นขอบ ก็ได้) โดยอักษรอยู่ที่พิกัด x,y

ตัวอย่างที่ 5 การใส่ตัวอักษร

<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello Nerd",10,50);

</script>

</body>
</html>

ผลลัพธ์คือ

 ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - เข้าเมนูหน้ารวมรายการใน admin ไม่ได้
โดย thatsawan ศ 29 พฤษภาคม 2020 5:58 pm บอร์ด Odoojob.com - Tester
0
1
ศ 29 พฤษภาคม 2020 5:58 pm โดย thatsawan
B - ยังขาดหน้าผลการค้นหา จาก search.php
โดย mindphp ศ 29 พฤษภาคม 2020 6:11 am บอร์ด FDD (Main)
0
1
ศ 29 พฤษภาคม 2020 6:11 am โดย mindphp
B - กล่องค้นหาจากหน้า index ใช้งานไม่ได้ กดแล้วไม่ไปหน้าค้นหา
โดย mindphp ศ 29 พฤษภาคม 2020 5:39 am บอร์ด FDD (Main)
1
1
ศ 29 พฤษภาคม 2020 5:53 am โดย mindphp
B - ไม่ใช่แค่โชว์ icon facebook มันต้องทำลิงค์เพื่อให้คลิกไป
โดย mindphp ศ 29 พฤษภาคม 2020 4:39 am บอร์ด FDD (Main)
1
2
ศ 29 พฤษภาคม 2020 4:51 am โดย mindphp
อัพเดท phpbb 3.3 เเล้ว extenstion ใช้งานไม่ได้
โดย thatsawan พฤ 28 พฤษภาคม 2020 10:08 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
43
พฤ 28 พฤษภาคม 2020 10:10 pm โดย thatsawan
วิธีการสร้าง css ที่ใช้งานเฉพาะในบราวเซอร์ safari เท่านั้น
โดย Ittichai_chupol พฤ 28 พฤษภาคม 2020 6:06 pm บอร์ด CSS Knowledge
0
34
พฤ 28 พฤษภาคม 2020 6:06 pm โดย Ittichai_chupol
R - Set Demo เป็น subdomain ของ ตัวนี้
โดย mindphp พฤ 28 พฤษภาคม 2020 6:17 am บอร์ด มารียา ซีฟู้ดส์ - Developer
0
8
พฤ 28 พฤษภาคม 2020 6:17 am โดย mindphp
อยากทราบวิธีการกำหนด ค่า css ให้กับ button โดยกำหนดเฉพาะแต่ละบราวเซอร์
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 8:39 pm บอร์ด HTML CSS
1
26
พ 27 พฤษภาคม 2020 9:15 pm โดย mindphp
อัพเดท Changelog flask framework ของภาษา Python
โดย jirawoot พ 27 พฤษภาคม 2020 12:19 pm บอร์ด Python Knowledge
0
47
พ 27 พฤษภาคม 2020 12:19 pm โดย jirawoot
งานประจำวันที่ 27 พฤษภาคม 2563
โดย yositacha26 พ 27 พฤษภาคม 2020 12:13 pm บอร์ด MP011 - โยษิตา จันทะวงษ์
1
25
พ 27 พฤษภาคม 2020 12:15 pm โดย yositacha26
อยากทราบว่า วิธีการกำหนดการตั้งค่า ภาษาไทย ใน Netbeans
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 10:13 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
44
พ 27 พฤษภาคม 2020 10:13 am โดย Ittichai_chupol
B - บริษัท approve ประวัติที่ส่งมาสมัครเเล้ว เเต่ยังแสดงสถานะเดิมอยู่
โดย thatsawan อ 26 พฤษภาคม 2020 6:27 pm บอร์ด Odoojob.com - Tester
0
4
อ 26 พฤษภาคม 2020 6:27 pm โดย thatsawan
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
1
67
จ 25 พฤษภาคม 2020 5:43 pm โดย thatsawan
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
1
72
จ 25 พฤษภาคม 2020 2:42 pm โดย thatsawan
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
2
12
ศ 29 พฤษภาคม 2020 9:32 am โดย tsukasaz
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
87
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
10
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
3
22
ศ 29 พฤษภาคม 2020 2:25 pm โดย thatsawan
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp