Site icon บริษัท โค๊ดบี จำกัด

HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas

codebee
html5-เริ่มต้นเขียน

html5-เริ่มต้นเขียน

<h3>HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ความสามารถของภาษา<br &sol;>&NewLine;เราสามารถใช้ภาษา Javascript เขียนโปรแกรมคำสั่งและความสามารถของ Canvas Element เพื่อวาด Graphic<br &sol;>&NewLine;ในรูปแบบ 2D เพื่อแสดงผลบนหน้าเว็บไซต์ได้<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างการเริ่มใช้งาน html5 canvas<&sol;h4>&NewLine;<p>จากตัวอย่างด้านล่าง สังเกตุที่ canvas element จะไม่ได้กำหนดความกว้างและความสูงของ canvas ไว้ ในกรณี<br &sol;>&NewLine;ที่เราไม่ได้กำหนดความค่า Width &&num;038&semi; Height ของ canvas ไว้ ค่า default ความกว้างความสูงของ canvas จะมี<br &sol;>&NewLine;ค่า Width &equals; 300 และ Height &equals; 150 <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"ตัวอย่างการใช้งาน html5 canvas" >&lt&semi;html&gt&semi; &NewLine; &lt&semi;head&gt&semi; &NewLine; &lt&semi;&sol;head&gt&semi; &NewLine; &lt&semi;body&gt&semi; &NewLine; &lt&semi;canvas id&equals;"canvas"&gt&semi;&lt&semi;&sol;canvas&gt&semi; &NewLine; &lt&semi;script&gt&semi; &NewLine; var canvas &equals; document&period;getElementById&lpar;'canvas'&rpar;&semi; &NewLine; var context &equals; canvas&period;getContext&lpar;'2d'&rpar;&semi; &NewLine; &lt&semi;&sol;script&gt&semi; &NewLine; &lt&semi;&sol;body&gt&semi; &NewLine;&lt&semi;&sol;html&gt&semi; <&sol;pre>&NewLine;<p>เราสามารถกำหนดค่า width และ height ของ canvas ได้เพียงแค่เพิ่ม attribue ทั้ง 2 เข้าไปดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;canvas id&equals;"canvas" width&equals;"800" height&equals;"600"&gt&semi;&lt&semi;&sol;canvas&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>วิธีเขียน graphic 2d ลงใน canvas<&sol;h4>&NewLine;<p>เราสามารถเขียนโปรแกรมคำสั่งต่าง ๆ โดยใช้ภาษา Javascript ในรูปแบบ 2D บน canvas ได้ โดยเริ่มต้น<br &sol;>&NewLine;ต้องกำหนดก่อนว่าเราจะเขียนลงใน canvas ตัวไหนและทุก canvas จะมี context 2d ติดมาด้วย<br &sol;>&NewLine;เราจะเขียน graphic ต่าง ๆ ลงใน context 2d นี่แหล่ะครับ ดูตัวอย่าง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"canvas วาดวงกลม" >var canvas &equals; document&period;getElementById&lpar;'canvas'&rpar;&semi; &NewLine;var context &equals; canvas&period;getContext&lpar;'2d'&rpar;&semi; &NewLine;context&period;beginPath&lpar;&rpar;&semi; &NewLine;context&period;arc&lpar;200&comma; 200&comma; 100&comma; 0&comma; 2 &ast; Math&period;PI&comma; false&rpar;&semi; &NewLine;context&period;fillStyle &equals; '&num;ff0000'&semi; &NewLine;context&period;fill&lpar;&rpar;&semi; &NewLine;context&period;lineWidth &equals; 10&semi; &NewLine;context&period;strokeStyle &equals; '&num;000'&semi; &NewLine;context&period;stroke&lpar;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;08&sol;html5-canvas-วาดวงกลม&period;png" alt&equals;"html 5 canvas วาดวงกลม" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<p>ทดลองเปลี่ยนสีพื้นของ canvas โดยใช้คำสั่ง javascript style เพื่อกำหนด backgroundColor<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >canvas&period;style&period;backgroundColor &equals; "&num;999999"&semi;<&sol;pre>&NewLine;<p>ตัวอย่างโค๊ดทั้งหมด<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;html&gt&semi; &NewLine; &lt&semi;head&gt&semi; &NewLine; &lt&semi;&sol;head&gt&semi; &NewLine; &lt&semi;body&gt&semi; &NewLine; &lt&semi;canvas id&equals;"canvas" width&equals;"800" height&equals;"600"&gt&semi;&lt&semi;&sol;canvas&gt&semi; &NewLine; &lt&semi;script&gt&semi; &NewLine; var canvas &equals; document&period;getElementById&lpar;'canvas'&rpar;&semi; &NewLine;&Tab;&Tab;var context &equals; canvas&period;getContext&lpar;'2d'&rpar;&semi; &NewLine;&Tab;&Tab;context&period;beginPath&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;context&period;arc&lpar;200&comma; 200&comma; 100&comma; 0&comma; 2 &ast; Math&period;PI&comma; false&rpar;&semi; &NewLine;&Tab;&Tab;context&period;fillStyle &equals; '&num;ff0000'&semi; &NewLine;&Tab;&Tab;context&period;fill&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;context&period;lineWidth &equals; 10&semi; &NewLine;&Tab;&Tab;context&period;strokeStyle &equals; '&num;000'&semi; &NewLine;&Tab;&Tab;context&period;stroke&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;canvas&period;style&period;backgroundColor &equals; "&num;999999"&semi; &NewLine; &lt&semi;&sol;script&gt&semi; &NewLine; &lt&semi;&sol;body&gt&semi; &NewLine;&lt&semi;&sol;html&gt&semi;<&sol;pre>&NewLine;

Exit mobile version