ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
คำสั่ง ดู พื้นที่ใน Folder Linux
โดย mindphp อ 17 ต.ค. 2017 9:42 pm บอร์ด Linux - Web Server
0
1
อ 17 ต.ค. 2017 9:42 pm โดย mindphp
สอบถามไม่สามารถใช้ Selenium IDE ใน Firefox ได้ครับ
โดย paoonline อ 17 ต.ค. 2017 4:39 pm บอร์ด Programming - C/C++ & java & Python
0
6
อ 17 ต.ค. 2017 4:39 pm โดย paoonline
สอบถามถ้าต้องการเช็คค่าที่เป็นจุดทศนิยมเเล้วต้องการปัดลงจะทำยังไงได้บ้างค่ะ
โดย thatsawan อ 17 ต.ค. 2017 1:42 pm บอร์ด Programming - C/C++ & java & Python
2
27
อ 17 ต.ค. 2017 1:42 pm โดย jataz2
Project Manager VS Developer - เมื่อประชุมทีมพัฒนา
โดย Before Dong อ 17 ต.ค. 2017 10:41 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 17 ต.ค. 2017 10:41 am โดย Before Dong
หนังสือส่งมอบงาน +คู่มือ+วีดีโอ+Cheklist - อะเมริซีด อินเตอร์เนชัน แนล จำกัด
โดย M029 จ 16 ต.ค. 2017 3:53 pm บอร์ด อะเมริซีด อินเตอร์เนชัน แนล จำกัด
0
2
จ 16 ต.ค. 2017 3:53 pm โดย M029
Project Manager VS Developer - เมื่อต้อง set demo เว็บไซต์
โดย Before Dong จ 16 ต.ค. 2017 11:15 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1160
จ 16 ต.ค. 2017 11:15 am โดย Before Dong
แก้ปัญหา PGSQL FATAL: sorry, too many clients already.
โดย mindphp ส 14 ต.ค. 2017 1:35 am บอร์ด PostgreSQL
0
24
ส 14 ต.ค. 2017 1:35 am โดย mindphp
จะสร้าง FTP account ใน cpanel ยังไง พอมีวิธ๊แนะนำมั้ย
โดย บุคคลทั่วไป ศ 13 ต.ค. 2017 11:04 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
18
ศ 13 ต.ค. 2017 11:04 pm โดย บุคคลทั่วไป
อยากสอบถามวิธีการเพิ่ม user เข้าใช้งาน cpanel
โดย บุคคลทั่วไป ศ 13 ต.ค. 2017 10:49 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
30
ศ 13 ต.ค. 2017 10:49 pm โดย บุคคลทั่วไป
แก้ปัญหา ลบฐานข้อมูลใน PostgreSQL ด้วยคำสั่ง dropdb ไม่ได้
โดย mindphp ศ 13 ต.ค. 2017 9:10 pm บอร์ด PostgreSQL
1
23
ศ 13 ต.ค. 2017 9:10 pm โดย mindphp
Php. ไม่สามารถอ่านค่าที่ส่งมาจาก vb(c#)ได้
โดย Note Pookinghin พฤ 12 ต.ค. 2017 7:19 pm บอร์ด Programming - PHP
1
28
พฤ 12 ต.ค. 2017 7:19 pm โดย mindphp
วิธีการลดขนาดไฟล์รูปภาพ เพื่อประหยัดเนื้อที่การใช้งาน
โดย paoonline พฤ 12 ต.ค. 2017 6:30 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
48
พฤ 12 ต.ค. 2017 6:30 pm โดย paoonline
programmer ทำอะไรใด้บ้าง
โดย Mr nic พฤ 12 ต.ค. 2017 5:17 pm บอร์ด Programming - PHP
1
54
พฤ 12 ต.ค. 2017 5:17 pm โดย konseo
database คิออะไร
โดย Mr nic พฤ 12 ต.ค. 2017 5:15 pm บอร์ด Programming - PHP
1
34
พฤ 12 ต.ค. 2017 5:15 pm โดย Before Dong
ติดตั้ง Joomla จากไฟล์ที่ Clone มาไม่ได้ครับ
โดย Before Dong พฤ 12 ต.ค. 2017 5:14 pm บอร์ด Joomla Development
0
26
พฤ 12 ต.ค. 2017 5:14 pm โดย Before Dong
ซอฟต์แวร์ ดูแล บริหารร้านขาย และร้านเภสัชกร
โดย Worldmedic Wmdcare พฤ 12 ต.ค. 2017 4:47 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
50
พฤ 12 ต.ค. 2017 4:47 pm โดย Worldmedic Wmdcare
ตัวอย่างการสร้างระบบ Login ด้วยภาษา Python(ไพทอน) เบื้องต้น
โดย paoonline พฤ 12 ต.ค. 2017 11:42 am บอร์ด Python Knowledge
0
68
พฤ 12 ต.ค. 2017 11:42 am โดย paoonline
คุณเป็น "โปรแกรมเมอร์" ระดับไหนเวลาเจอปัญหา
โดย Before Dong พฤ 12 ต.ค. 2017 10:50 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
761
พฤ 12 ต.ค. 2017 10:50 am โดย ...
คำสั่ง restart GitLab
โดย mindphp พ 11 ต.ค. 2017 8:41 pm บอร์ด Linux - Web Server
1
19
พ 11 ต.ค. 2017 8:41 pm โดย mindphp
สอบถามเกี่ยวกับการ ให้สิทธิ์ ครับ
โดย ざけんなコラ一 พ 11 ต.ค. 2017 7:19 pm บอร์ด SQL - Database
2
50
พ 11 ต.ค. 2017 7:19 pm โดย ざけんなコラ一