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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามครับ ผมลง ubuntu 14.04 แล้วต่อเน็ตจากสาย LAN ไม่ได้
โดย tatiya จ 18 มี.ค. 2019 10:05 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
1
จ 18 มี.ค. 2019 10:11 pm โดย tatiya
เเจกสูตรไข่ม้วนชีส
โดย สริญญา สมสา จ 18 มี.ค. 2019 5:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
จ 18 มี.ค. 2019 5:34 pm โดย สริญญา สมสา
วิธีการทำทับทิมกรอบ
โดย สริญญา สมสา จ 18 มี.ค. 2019 5:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
2
จ 18 มี.ค. 2019 5:03 pm โดย สริญญา สมสา
คำนวณค่าเสื่อมราคายังไคะ
โดย kulanan2535 จ 18 มี.ค. 2019 4:49 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
5
จ 18 มี.ค. 2019 4:49 pm โดย kulanan2535
5 ร้านอาหารญี่ปุ่นเเละซูชิถูกเเละอร่อย
โดย สริญญา สมสา จ 18 มี.ค. 2019 4:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
3
จ 18 มี.ค. 2019 4:23 pm โดย สริญญา สมสา
list ความรู้ที่มีว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย napharat079 จ 18 มี.ค. 2019 3:37 pm บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
0
12
จ 18 มี.ค. 2019 3:37 pm โดย napharat079
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย kulanan2535 จ 18 มี.ค. 2019 3:26 pm บอร์ด M078 - กุลนันทน์ อุ่นเรือน
0
14
จ 18 มี.ค. 2019 3:26 pm โดย kulanan2535
วัดถ้ำเขาหลวงสถานที่ท่องเที่ยวธรรมชาติที่ต้องไปสัมผัส
โดย napharat079 จ 18 มี.ค. 2019 3:03 pm บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
0
7
จ 18 มี.ค. 2019 3:03 pm โดย napharat079
การเดินทางจากน่านไปกรุงเทพ
โดย kulanan2535 จ 18 มี.ค. 2019 3:00 pm บอร์ด M078 - กุลนันทน์ อุ่นเรือน
0
6
จ 18 มี.ค. 2019 3:00 pm โดย kulanan2535
การยื่นภาษี
โดย สริญญา สมสา จ 18 มี.ค. 2019 2:59 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
5
จ 18 มี.ค. 2019 2:59 pm โดย สริญญา สมสา
G Suite เริ่มมีการปรับราคาขึ้น อีกแล้ว
โดย icphp จ 18 มี.ค. 2019 2:15 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
4
จ 18 มี.ค. 2019 2:15 pm โดย icphp
กรมสรรพากร คืออะไร
โดย สริญญา สมสา จ 18 มี.ค. 2019 12:16 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
3
จ 18 มี.ค. 2019 12:16 pm โดย สริญญา สมสา
งานประจำวันที่ 18 มีนาคม 2562
โดย kulanan2535 จ 18 มี.ค. 2019 11:26 am บอร์ด M078 - กุลนันทน์ อุ่นเรือน
2
18
จ 18 มี.ค. 2019 7:02 pm โดย kulanan2535
งานประจำวันที่ 18 มีนาคม 2562
โดย napharat079 จ 18 มี.ค. 2019 11:26 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
2
7
จ 18 มี.ค. 2019 7:21 pm โดย napharat079
Skype for Business และ Microsoft Teams
โดย Atomseed Suckseed จ 18 มี.ค. 2019 11:24 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
จ 18 มี.ค. 2019 11:24 am โดย Atomseed Suckseed
ไปญี่ปุ่นต้องกินอะไร
โดย สริญญา สมสา จ 18 มี.ค. 2019 11:12 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
จ 18 มี.ค. 2019 11:12 am โดย สริญญา สมสา
อยากทราบวิธีการ เขียน SQL เพื่อ Update ข้อมูล ตอนที่ติดตั้ง Extension ใน phpbb
โดย Ittichai_chupol จ 18 มี.ค. 2019 10:25 am บอร์ด Programming - PHP
2
11
จ 18 มี.ค. 2019 4:04 pm โดย Ittichai_chupol
งานประจำวันที่ 18 มีนาคม 2562
โดย Four จ 18 มี.ค. 2019 10:17 am บอร์ด M077 - อิษยา งามสอาด
1
6
จ 18 มี.ค. 2019 7:42 pm โดย Four
งานประจำวันที่ 18 มีนาคม 2562
โดย สริญญา สมสา จ 18 มี.ค. 2019 9:35 am บอร์ด MT32 - นางสาวสริญญา สมสา
1
5
จ 18 มี.ค. 2019 5:09 pm โดย สริญญา สมสา
หากไม่ได้ไปใช้สิทธิเลือกตั้งสมาชิกสภาผู้แทนราษฎร จะมีผลอย่างไร และควรทำอย่างไร
โดย saibennn9 อ 17 มี.ค. 2019 10:05 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
29
จ 18 มี.ค. 2019 9:15 am โดย Yoon007