รับทําเว็บไซต์ รับทําseo

Product & Service

เกี่ยวกับ Softmelt

Help ช่วยเหลือลูกค้า

บทความ Softmelt

Of The Week

สนามบินสมุย - บางกอกแอร์เวย์ส
สนามบินสมุย - บริษัท การบินกรุงเทพ จำกัด (มหาชน)
 
รับทําเว็บไซต์ รับทําseo

Webmaster

บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

Canvas element ใน HTML5 มันคืออะไรกันน่ะ ???

แชร์

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

    Canvas element มีคำสั่งในการควบคุมเยอะแยะเช่น วาดเส้น วงกลม สี่เหลี่ยม เส้นตรง เส้นโค้ง ฯลฯ ณ จุดนี้ผมออกปากก็เลย เพราะเดี๋ยวคงจะมีคนมาถามว่า การเขียน Canvas element ใน HTML5 นั้นยากไหม ? ผมบอกก่อนเลยครับว่า มันไม่ใช่เรื่องยาก (สักเท่าไหร่) แต่…… คนที่จะเขียนต้องมีความรู้พื้นฐานและเข้าใจในโครงสร้างของภาษา HTML และ JavaScript พอสมควร ไม่งั้นก็เหมือนหัดเขียนใหม่แหละจ๊ะ

    Canvas element ทำให้เราสามารถสร้าง application ที่สามารถใช้งานแทน Flash กันได้เลยทีเดียว มีคนใช้ canvas ในการสร้างเกมส์ด้วย การเรียนรู้การใช้งาน canvas นั้นไม่ยากสามารถศึกษาได้จาก HTML5 Canvas แต่การจะวาดรูปให้สวยงามนั้นเราต้องรู้จักฟังก์ชันของ JavaScript ด้วย มีเว็บไซต์ที่สอนการใช้งาน canvas อยู่เว็บไซต์หนีงที่คิดว่าน่าจะมีประโยชน์นั้นคือ http://www.html5canvastutorials.com ได้รวบรวม กรณีศึกษาเกี่ยวกับ canvas ไว้มากมายทดลองใช้งานดูนะครับ

    ถ้าเพื่อนๆที่เคยใช้พวก Java applet คงจะพอนึกภาพออกนะครับว่า Canvas นั้นมันก็เป็นพื้นที่สี่เหลี่ยมที่เอาไว้ใช้แสดงผลกราฟฟิก ที่เราสามารถจะควบคุมได้ สามารถควบคุมในระดับ pixel ได้เลยทีเดียว

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

    ตัวอย่าง code Element canvas

    1
    2
    3
    <canvas id="myCanvas"
            width="450" height="200"
            style="background-color:red"></canvas>

    ผลที่ได้ก็จะเหมือนๆกับเราสร้าง Element DIV ครับ เพียงแต่ว่าความสามารถของ Canvas นั้นมันมีมากกว่า และถ้าคลิกขวาที่ Canvas เราสามารถที่จะ Save ออกมาเป็น Image ได้ด้วยนะครับ

     

     

    จะเห็นว่าเราสามารถใส่สีพื้นหลังหรือจะกำหนด position เป็นแบบ absolute ให้มันลอยเหนือ Element อื่นๆก็ได้นะครับ และ Canvas เราสามารถที่จะ Render ภาพทั้ง 2D หรือ 3D ในพื้นที่ของ Canvas ก็ได้นะครับ มันเจ๋งตรงนี้แหละ ไม่ต้องไปพึ่งพา Flash เลยก็สามารถที่จะเขียนให้แสดงผล 3D ได้

     

     

    Code :

    1
    2
    3
    4
    5
    6
    7
       var canvas = document.getElementById('myCanvas2');
       if (canvas.getContext){
             var ctx = canvas.getContext('2d');
                 ctx.fillRect(25,25,100,100);
                 ctx.clearRect(45,45,60,60);
                 ctx.strokeRect(50,50,50,50);
        }

     

    จากตัวอย่างจะเห็นว่าเราสามารถที่จะวาดภาพของรูปสี่เหลี่ยมลงไปบนพื้นที่ของ Canvas ที่เราได้สร้างขึ้นมา ส่วนวิธีการวาดภาพหรือการแสดงผลแบบอื่นๆนั้นผมจะเขียนลงในตอนที่ลงลึกเกี่ยวกับการทำงาน หรือ การใช้งาน Canvas ให้ได้อ่านกันในบทต่อๆไปนะครับ ตอนนี้ขอนำเสนอ HTML5 Element ต่างๆให้ทำความรู้จักกันไปก่อนครับ

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com