Canvas element ใน HTML5

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

M034
PHP Super Member
PHP Super Member
Posts: 258
Joined: 28/03/2016 10:21 am
Contact:

Canvas element ใน HTML5

Post by M034 »

Canvas element เป็นคุณสมบัติทางด้านกราฟฟิกที่มาพร้อมกับ HTML5 และ Canvas element กราฟฟิกตัวนี้ สามารถทำให้คุณสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ ที่รองรับทุก platform ซึ่งหลายๆ คนคงจะเคยเห็นและเล่นเกมส์แฟรช (Flash Games) ซึ่งข้อเสียของมันก็คือต้องใช้ปลั๊กอินที่ชื่อว่า Flash player และแน่นอนว่าถ้าเครื่องไหนไม่สามารถลงปลั๊กอินตัวนี้ได้ ก็จะไม่สามารถเข้าชม หรือเล่นได้นั้นเอง แต่ถ้าระบบหรือเกมส์ นั้นๆ ถูกพัฒนาด้วย HTML5 จะสามารถเล่นได้ทุกระบบปฏิบัติการ โดยที่ไม่จำเป็นต้องลงปลั๊กอินใดๆ เพิ่ม

Canvas element มีคำสั่งในการควบคุมเยอะมากเช่น วาดเส้นวงกลม สี่เหลี่ยม เส้นตรง เส้นโค้ง ฯลฯ คนที่จะเขียนต้องมีความรู้พื้นฐานและเข้าใจในโครงสร้างของภาษา HTML และ JavaScript พอสมควร

Canvas element ทำให้เราสามารถสร้างที่สามารถใช้งานแทน Flash ได้เลย มีคนใช้ canvas ในการสร้างเกมส์ การเรียนรู้การใช้งาน canvas นั้นไม่ยากสามารถศึกษาได้จาก HTML5 Canvas แต่การจะวาดรูปให้สวยงามนั้นเราต้องรู้จักฟังก์ชันของ JavaScript ด้วย

Canvas นั้นก็เหมือนๆกับ Element อื่นๆ สามารถกำหนด Style ให้ได้ไม่ว่าจะเป็นสี ขนาดความกว้าง ความสูง กำหนดตำแหน่งได้ด้วย

ตัวอย่างการวาดเส้นโค้งใน canvas

Code: Select all

<html>
<meta charset="UTF-8"/>
<canvas height="200" id="myCanvas" width="578"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;       // จุดกึ่งกลาง x
var y = canvas.height / 2;      // จุดกึ่งกลาง y
var radius = 80;                // รัศมี
var startAngle = 1.1 * Math.PI; // มุมเรเดียนเริ่มต้น
var endAngle = 1.9 * Math.PI;   // มุมเรเดียนสิ้นสุด
var counterClockwise = false;   // วาดทวนเข็มนาฬิกา หรือตามเข็มนาฬิกา
 
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;        // ความหนาเส้น
 
// line color
context.strokeStyle = 'red'; // สีเส้น
context.stroke();
</script>
ศึกษาเพิ่มเติมได้ที่
บทที่ 3 HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิกใน HTML5 เปลี่ยนลูกเล่นการแสดงผลจากเดิม

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 9 guests