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 เพื่อแสดงผลบนหน้าเว็บไซต์ได้

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