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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 17 พฤษจิกายน 2561
โดย Ittichai_chupol ส 17 พ.ย. 2018 10:33 am บอร์ด M070 - อิทธิชัย ชูผล
0
2
ส 17 พ.ย. 2018 10:33 am โดย Ittichai_chupol
การเพิ่มลบค่าให้กับตัวแปร
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 10:31 am บอร์ด PHP Knowledge
0
3
ส 17 พ.ย. 2018 10:31 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 17 พฤศจิกายน 2561
โดย nice_13 ส 17 พ.ย. 2018 9:43 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
ส 17 พ.ย. 2018 9:43 am โดย nice_13
งานประจำวันที่ 17 พฤศจิการยน 2561
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 9:32 am บอร์ด MT27 - ธวัชชัย แสนหาญ
0
2
ส 17 พ.ย. 2018 9:32 am โดย ธวัชชัย แสนหาญ
งานประจำวันที่ 17 พฤศจิกายน 2561
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 9:30 am บอร์ด MT28 - จันนุสรณ์ ดีแก่
0
2
ส 17 พ.ย. 2018 9:30 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 17 พฤศจิกายน 2561
โดย Aussadawut ส 17 พ.ย. 2018 8:53 am บอร์ด M072 - อัษฎาวุฒิ ยิ่งนคร
0
5
ส 17 พ.ย. 2018 8:53 am โดย Aussadawut
เข้า templates แล้ว error แก้ไขยังไงครับ
โดย Anonymous ศ 16 พ.ย. 2018 8:50 pm บอร์ด Joomla Development
1
18
ศ 16 พ.ย. 2018 10:32 pm โดย mindphp
Q - วิธีการสร้าง popup แล้วกรอกข้อมูลพร้อมทำให้เป็น BBcode ] ลงในกระทู้ได้เลย ใน phpbb
โดย Ittichai_chupol ศ 16 พ.ย. 2018 6:21 pm บอร์ด Programming - PHP
1
26
ศ 16 พ.ย. 2018 10:13 pm โดย thatsawan
การใช้ตัวแปรชนิด tuple ใน python
โดย ธวัชชัย แสนหาญ ศ 16 พ.ย. 2018 5:31 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
3
ศ 16 พ.ย. 2018 5:31 pm โดย ธวัชชัย แสนหาญ
การใช้คำสั่ง del ลบค่าใน list ใน python
โดย ธวัชชัย แสนหาญ ศ 16 พ.ย. 2018 5:18 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
3
ศ 16 พ.ย. 2018 5:18 pm โดย ธวัชชัย แสนหาญ
ภาษาซี กับ โจทย์ Loop ในตำนาน (2)
โดย Aussadawut ศ 16 พ.ย. 2018 4:54 pm บอร์ด Share Knowledge
0
16
ศ 16 พ.ย. 2018 4:54 pm โดย Aussadawut
การใช้งานตัวแปร list พื้นฐานใน python
โดย ธวัชชัย แสนหาญ ศ 16 พ.ย. 2018 4:53 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
3
ศ 16 พ.ย. 2018 4:53 pm โดย ธวัชชัย แสนหาญ
ภาษาซี กับ โจทย์ Loop ในตำนาน (1)
โดย Aussadawut ศ 16 พ.ย. 2018 4:26 pm บอร์ด Share Knowledge
0
19
ศ 16 พ.ย. 2018 4:26 pm โดย Aussadawut
พื้นฐานการสร้างอาเรย์หลายมิติ ในภาษา php
โดย จันนุสรณ์ ดีแก่ ศ 16 พ.ย. 2018 4:25 pm บอร์ด Share Knowledge
0
20
ศ 16 พ.ย. 2018 4:25 pm โดย จันนุสรณ์ ดีแก่
การใช้ ตัวดำเนินการทางคณิตศาสตร์ ใน python
โดย ธวัชชัย แสนหาญ ศ 16 พ.ย. 2018 4:18 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
3
ศ 16 พ.ย. 2018 4:18 pm โดย ธวัชชัย แสนหาญ
การใช้ if else ใน python
โดย ธวัชชัย แสนหาญ ศ 16 พ.ย. 2018 3:48 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
8
ศ 16 พ.ย. 2018 3:48 pm โดย ธวัชชัย แสนหาญ
สารสนเทศ ความหมายของข้อมูลและสารสนเทศ
โดย Aussadawut ศ 16 พ.ย. 2018 3:43 pm บอร์ด Share Knowledge
0
10
ศ 16 พ.ย. 2018 3:43 pm โดย Aussadawut
รูปอบรม RTP
โดย tai14 ศ 16 พ.ย. 2018 3:35 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
2
ศ 16 พ.ย. 2018 3:42 pm โดย tai14
ระบบสารสนเทศเพื่อผู้บริหารระดับสูง
โดย Aussadawut ศ 16 พ.ย. 2018 3:31 pm บอร์ด Share Knowledge
0
9
ศ 16 พ.ย. 2018 3:31 pm โดย Aussadawut
B - กดอัพรูปและเลือกรูปที่เคยอัพไม่ได้ใน MD File ในเว็บ mindphp
โดย Parichat ศ 16 พ.ย. 2018 3:19 pm บอร์ด Joomla Dev
0
3
ศ 16 พ.ย. 2018 3:19 pm โดย Parichat