html5: มารู้จัก Canvas กันดีกว่า

Canvas คืออุปกรณ์หนึ่งที่เป็นตัวช่วยในการวาดภาพ เราสามารถเขียนกำหนดจุดการวาดได้ระดับ Pixel เราสามารถวาดภาพได้หลายแบบ ทั้งวงกลม สี่เหลี่ยม ตัวอักษร และนำเข้ารูปภาพ ..

สิ่งสำคัญของการวัด คือ ID , กว้าง , ยาว

 <canvas id="myCanvas" width="200" height="100"></canvas>

การวาดภาพ Canvas จะไม่มีความสามารถในการวาดภาพ ด้วยตัวมันเอง แต่จะสามารถเขียนคุมมันได้ด้วย Javascript เพื่อกำหนดคุณสมบัติของมัน

<script type="text/javascript">
var c=document.getElementById("myCanvas"); // เลือก หา canvas ที่ต้องการ
var cxt=c.getContext("2d");  // สร้างวัตถุ
cxt.fillStyle="#FF0000";  // กำหนดเทสี
cxt.fillRect(0,0,150,75); // กำหนดขนาด
</script>

ความเข้าใน cxt.fillRect(0,0,150,75) หมายความว่า
ขนาดของสี่เหลี่ยม 150x75 โดยกำหนดจุดกำเนิดที่มุมซ้ายบน (0,0)


ตัวอย่างการวาดเส้น
<script type="text/javascript">

// เส้น
var cxt=c.getContext("2d");
cxt.moveTo(30,10);
cxt.lineTo(80,60);
cxt.lineTo(30,60);
cxt.stroke();

//วงกลม
var cxt2=c.getContext("2d");
cxt2.fillStyle="#FF0000";
cxt2.beginPath();
cxt2.arc(120,35,15,0,Math.PI*2,true);
cxt2.closePath();
cxt2.fill();

// Gradient
var cxt3=c.getContext("2d");
var grd=cxt3.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt3.fillStyle=grd;
cxt3.fillRect(0,70,175,50);

</script>