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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจัดการเรียนการสอนด้วย GOOGLE CLASSROOM ใน Google Apps for education
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 16 ม.ค. 2019 11:35 pm บอร์ด Share Knowledge
0
8
พ 16 ม.ค. 2019 11:35 pm โดย ณัฐกฤตา บุญญะฤทธิ์
สงคราม music streaming คุณอยู่ทีมไหน
โดย abdkode พ 16 ม.ค. 2019 6:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
พ 16 ม.ค. 2019 6:46 pm โดย abdkode
Python Gui เบื้องต้น part5 สร้างTextBoxกับMenubar
โดย ichimarusoichi พ 16 ม.ค. 2019 5:26 pm บอร์ด Programming - C/C++ & java & Python
0
6
พ 16 ม.ค. 2019 5:26 pm โดย ichimarusoichi
B - เข้าไปดู Logged Calls ที่คนอื่น FW มาหาตัวเองไม่ได้
โดย Parichat พ 16 ม.ค. 2019 4:38 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
พ 16 ม.ค. 2019 4:38 pm โดย Parichat
ความรู้เกี่ยวกับสายแลน (LAN Cable) วิธีการและขั้นตอนการเข้าหัวสาย LAN RJ-45
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 16 ม.ค. 2019 4:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
20
พ 16 ม.ค. 2019 4:19 pm โดย ณัฐกฤตา บุญญะฤทธิ์
การไปทำงานในแต่ละวัน
โดย จันนุสรณ์ ดีแก่ พ 16 ม.ค. 2019 3:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
พ 16 ม.ค. 2019 3:46 pm โดย จันนุสรณ์ ดีแก่
การคิดค่าเสื่อมราคาวิธีเส้นตรง
โดย Chidchanok พ 16 ม.ค. 2019 3:08 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
7
พ 16 ม.ค. 2019 3:08 pm โดย Chidchanok
วิธีการ ตั้งค่าการแจ้งเตือนเว็บบอร์ด รับการแจ้งเตือนโดย E-mail (อีเมลล์)
โดย จันนุสรณ์ ดีแก่ พ 16 ม.ค. 2019 2:49 pm บอร์ด phpBB user Guide Knowledge
0
13
พ 16 ม.ค. 2019 2:49 pm โดย จันนุสรณ์ ดีแก่
อยากทราบ วิธีการสร้างเมนู ในส่วน ของ ucp ใน phpbb
โดย Ittichai_chupol พ 16 ม.ค. 2019 2:42 pm บอร์ด Programming - PHP
0
6
พ 16 ม.ค. 2019 2:42 pm โดย Ittichai_chupol
อยากทราบวิธีการดึงข้อมูล รายการกระทู้โปรด ใน phpbb
โดย Ittichai_chupol พ 16 ม.ค. 2019 2:20 pm บอร์ด Programming - PHP
1
10
พ 16 ม.ค. 2019 5:55 pm โดย meSitti2
เงินสดย่อย ( Petty Cash) คืออะไร ?
โดย Chidchanok พ 16 ม.ค. 2019 2:00 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
8
พ 16 ม.ค. 2019 5:54 pm โดย meSitti2
ขั้นตอนการลงข้อมูล Leads ใน OpenERP เพื่อเป็นการเก็บข้อมูลลูกค้าที่ติดต่อและสนใจสินค้าบริการของบริษัท
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 16 ม.ค. 2019 1:36 pm บอร์ด Share Knowledge
0
33
พ 16 ม.ค. 2019 1:36 pm โดย ณัฐกฤตา บุญญะฤทธิ์
สอบถามค่ะไม่สามารถดูวิดิโอใน Google Drive ได้
โดย Chidchanok พ 16 ม.ค. 2019 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
4
25
พ 16 ม.ค. 2019 3:00 pm โดย Chidchanok
ดาวน์โหลดอัพเดท Joomla 3.9.2 ปรับปรุงเรื่องความปลอดภัยและแก้ไขข้อผิดพลาด
โดย tsukasaz พ 16 ม.ค. 2019 12:21 pm บอร์ด PHP News
0
5
พ 16 ม.ค. 2019 12:21 pm โดย tsukasaz
ขั้นตอนของการเปลี่ยน E-mail (อีเมล์) ในเว็บบอร์ด phpBB (พีเอชพีบีบี) สำหรับสมาชิก
โดย จันนุสรณ์ ดีแก่ พ 16 ม.ค. 2019 12:10 pm บอร์ด phpBB user Guide Knowledge
0
17
พ 16 ม.ค. 2019 12:10 pm โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] ProLight Extension สไตล์สีขาว ช่วยให้เว็บบอร์ดดูสะอาดมีความสวยงาม
โดย จันนุสรณ์ ดีแก่ พ 16 ม.ค. 2019 11:16 am บอร์ด phpBB 3.1 Extension Review
0
10
พ 16 ม.ค. 2019 11:16 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] Fancybox - A Lightbox Alternative Extension การแสดงของรูปภาพ
โดย จันนุสรณ์ ดีแก่ พ 16 ม.ค. 2019 10:29 am บอร์ด phpBB 3.1 Extension Review
0
9
พ 16 ม.ค. 2019 10:29 am โดย จันนุสรณ์ ดีแก่
R - การตั้งค่า Config สำหรับขึ้นระบบ
โดย mindphp พ 16 ม.ค. 2019 5:42 am บอร์ด PP systems (Main)
0
1
พ 16 ม.ค. 2019 5:42 am โดย mindphp
คำสั่ง Loop ภาษา php
โดย abdkode อ 15 ม.ค. 2019 7:01 pm บอร์ด PHP Knowledge
0
22
อ 15 ม.ค. 2019 7:01 pm โดย abdkode
วิธีถ่ายโอนรูปภาพจากแอนดรอยด์ด้วยแอพฯ Your Phone บน Windows
โดย theoneozz อ 15 ม.ค. 2019 6:40 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
18
อ 15 ม.ค. 2019 6:40 pm โดย theoneozz