html5 Canvas วิธีทำ Animation จาก Sprite Sheet

html5 canvas animation

html5 Canvas วิธีทำ Animation จาก Sprite Sheet html5 Canvas วิธีทำ Animation จาก Sprite Sheet ( Frame by frame ) Sprite Sheet หมายถึงรูปแผ่นใหญ่ที่ภายในจะเก็บรูปย่อย ๆ ไว้อีกหลายรูป แล้วค่อยนำมาตัดแบ่งใช้งานเฉพาะส่วนที่จำเป็นต้องแสดงผลเท่านั้น ตัวอย่างเช่นในรูปขนาด 1024×1024 pixel อาจจะมีทั้งรูปต้นไม้ คน ไอเทมต่าง ๆ ในเกมส์ เมื่อต้องการแสดงผลต้นไม้ ก็ไปครอปเอาเฉพาะต้นไม้เท่านั้นมาแสดง เป็นการโหลดรูปแผ่นใหญ่เพียงครั้งเดียว แต่สามารถนำไปใช้ได้กับหลาย ๆ ส่วนของงาน

อ่านเพิ่มเติม


HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP

html5_canvas-เซฟรูป-1

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความสามารถอีกอย่างหนึ่งที่ติดมากับ HTML5 ทำให้เราสามารถพัฒนาแอพพลิเคชั่นและเกมส์ได้ง่ายขึ้น การบันทึกรูปภาพหน้าจอหรือการ Screen Capture เป็นอีกหนึ่งฟังก์ชั่นที่มักจะมีคู่มากับแอพพลิเคชั่นหรือเกมส์ โดยเฉพาะแอพพลิเคชั่นสไตล์ออกแบบตกแต่ง เช่นแอพพลิเคชั่น ออกแบบเสื้อผ้าหรือแอพพลิเคชั่นแต่งตัวละคร เมื่อออกแบบเสร็จแล้วก็จะมีการเซฟรูป บันทึกลงเครื่อง แชร์ หรือ บันทึกข้อมูลรูปภาพลงฐานข้อมูลเพื่อนำไปใช้งานในโอกาสต่อไป

อ่านเพิ่มเติม


HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax

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

HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง drawImage ของ context 2d เพื่อวาดรูปให้แสดงผลบน Canvas

อ่านเพิ่มเติม


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

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

HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ความสามารถของภาษา เราสามารถใช้ภาษา Javascript เขียนโปรแกรมคำสั่งและความสามารถของ Canvas Element เพื่อวาด Graphic ในรูปแบบ 2D เพื่อแสดงผลบนหน้าเว็บไซต์ได้

อ่านเพิ่มเติม


fabric.js เปลี่ยนรูป control ต่าง ๆ ของ fabric.js / resize and rotate controls with custom images

fabric.js เปลี่ยนรูป control ต่าง ๆ ของ fabric.js / resize and rotate controls with custom images สำหรับคนที่ใช้ fabric.js ในการทำแอพต่าง ๆ อาจจะมีปัญหาเกี่ยวกับการปรับแต่งหน้าตา transform tool ตัว default ของ fabric.js วันนี้มาแนะนำวิธีเปลี่ยนรูปสี่เหลี่ยมเดิม ๆ ของ fabric.js ให้เป็นรูปตาที่เราต้องการ

อ่านเพิ่มเติม


HTML5 Canvas ด้วย EaseJS เขียน HTML5 ให้ได้ดัง flash

HTML5 Canvas ด้วย EaseJS เขียน HTML5 ให้ได้ดัง flash EaseJS เป็น HTML5 Framework อีกตัวที่น่าสนใจ โดยเฉพาะ programmer ที่เคยเขียนภาษา Action Script 3 มาก่อน รูปแบบ Syntax ของ EaseJS จะมีความคล้ายภาษา Action Script 3 อยู่พอสมควร ในช่วงเวลาที่ Mobile Device ไม่รองรับ Flash นี่อาจจะเป็นอีกทางเลือกหนึ่งที่ดี และเหมาะกับ Flash Developer

อ่านเพิ่มเติม