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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
R - ปรับให้ Product ใน JoomShopping อัพรูปภาพตามสีได้
โดย tsukasaz ศ 25 พฤษภาคม 2018 5:49 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
3
ศ 25 พฤษภาคม 2018 5:49 pm โดย tsukasaz
B - ไม่สามารถ Import Serial Outgoing ได้ครับ [2018-05][004]
โดย AePongsak ศ 25 พฤษภาคม 2018 4:58 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
1
11
ศ 25 พฤษภาคม 2018 6:33 pm โดย nuattawoot
เข้าใช้ไม่ได้ค่ะ [2018-05][003]
โดย Rujikon ศ 25 พฤษภาคม 2018 4:36 pm บอร์ด บวรเวชสมุนไพรไทย จำกัด - Tester
0
3
ศ 25 พฤษภาคม 2018 4:36 pm โดย Rujikon
Q - ทำรูปภาพให้สามารถเปลี่ยนสีได้ตามต้องการ
โดย Parichat ศ 25 พฤษภาคม 2018 4:04 pm บอร์ด Joomla Dev
12
33
ศ 25 พฤษภาคม 2018 6:20 pm โดย Parichat
Q - ย่อสินค้าให้เท่ากับพื้นหลัง
โดย Parichat ศ 25 พฤษภาคม 2018 3:40 pm บอร์ด Joomla Dev
16
36
ศ 25 พฤษภาคม 2018 6:15 pm โดย Parichat
Q - ใน Joomshopping ในหน้าเว็บเอา Order by กับ Display ออก
โดย Parichat ศ 25 พฤษภาคม 2018 3:04 pm บอร์ด Joomla Development
2
11
ศ 25 พฤษภาคม 2018 3:21 pm โดย Parichat
B - การใช้งาน Logged calls
โดย watcharin ศ 25 พฤษภาคม 2018 2:37 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ศ 25 พฤษภาคม 2018 2:37 pm โดย watcharin
Q - จัดพื้นหลังให้เท่ากับเมนูด้านบน
โดย Parichat ศ 25 พฤษภาคม 2018 2:20 pm บอร์ด HTML CSS
1
12
ศ 25 พฤษภาคม 2018 2:50 pm โดย Parichat
B - ภาษีต้องเพิ่ม จากราคา
โดย thatsawan ศ 25 พฤษภาคม 2018 1:26 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
1
3
ศ 25 พฤษภาคม 2018 1:27 pm โดย thatsawan
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
19
1
ศ 25 พฤษภาคม 2018 4:26 pm โดย Parichat
งานประจำวันที่ 25 พฤษภาคม 2561
โดย Rujikon ศ 25 พฤษภาคม 2018 11:46 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
8
ศ 25 พฤษภาคม 2018 8:06 pm โดย nuattawoot
B - ไม่สามารถเข้าไปดูรายละเอียดของ Customer ได้
โดย watcharin ศ 25 พฤษภาคม 2018 11:44 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
6
ศ 25 พฤษภาคม 2018 11:44 am โดย watcharin
Q - ต้องการให้ Python GUI( Tkinter ) เก็บ Path ที่ได้จากการ Browse
โดย rangsan ศ 25 พฤษภาคม 2018 11:32 am บอร์ด Programming - C/C++ & java & Python
4
23
ศ 25 พฤษภาคม 2018 3:40 pm โดย nuattawoot
Q - สร้างเทมเพลตใน Joomla แต่ไม่ขึ้นไฟล์ให้ติดตั้ง
โดย Parichat ศ 25 พฤษภาคม 2018 11:11 am บอร์ด Joomla Development
3
11
ศ 25 พฤษภาคม 2018 11:35 am โดย Parichat
งานประจำวันที่ 25 พฤษภาคม 2561
โดย Parichat ศ 25 พฤษภาคม 2018 10:45 am บอร์ด M061 - ปาริชาติ รัตโณภาส
2
4
ศ 25 พฤษภาคม 2018 7:25 pm โดย Parichat
งานประจำวันที่ 25 พฤษภาคม 2561
โดย rangsan ศ 25 พฤษภาคม 2018 10:45 am บอร์ด M058 - รังสรรค์ มุ่งกลาง
1
2
ศ 25 พฤษภาคม 2018 6:58 pm โดย rangsan
B - แก้ไขชื่อบริษัทไม่ได้ error
โดย thatsawan พฤ 24 พฤษภาคม 2018 6:21 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
พฤ 24 พฤษภาคม 2018 6:21 pm โดย thatsawan
G - ทดสอบระบบจริง เพิ่มลูกค้า สร้างใบเสนอราคา สร้าง inv รับชำระ ผ่าน
โดย thatsawan พฤ 24 พฤษภาคม 2018 6:17 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
6
พฤ 24 พฤษภาคม 2018 6:17 pm โดย thatsawan
Q - login เข้าหน้า admin ไม่ได้
โดย Parichat พฤ 24 พฤษภาคม 2018 6:03 pm บอร์ด Joomla Development
16
51
พฤ 24 พฤษภาคม 2018 11:24 pm โดย Parichat
Q - เลขรันเอกสารที่จะต้องใช้ในบริษัท
โดย thatsawan พฤ 24 พฤษภาคม 2018 5:16 pm บอร์ด M.D.Soft Co.,Ltd. (Main)
1
6
ศ 25 พฤษภาคม 2018 11:33 am โดย kanchanok