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

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

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



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



สาเหตุที่เราจำเป็นต้องใช้คำสั่งของ Ajax โหลดรูปก่อน ก็เพื่อให้แน่ใจว่ารูปนั้นโหลดเสร็จแล้วหรือในการทำงานจริง ๆ
เราอาจจะต้องการทำ preloading หรือ progress bar เพื่อโหลดรูปทั้งหมดให้เสร็จก่อนที่จะเริ่มทำงานส่วนอื่น ๆ


โหลดรูปเข้ามาใน HTML5 Canvas

เริ่มต้นสร้าง canvas ภายใน html body tag

โหลดรูปให้เสร็จหรือทำ progress bar ในขั้นตอนนี้ ด้วย Jquery Ajax

วาดรูปลงใน Canvas ด้วยคำสั่ง drawImage ของ Context 2D

กำหนดตำแหน่ง x และ y ของรูปให้อยู่ตรงกลางโดยคำนวณจากขนาดของ canvas และขนาดรูป

ใช้ CSS กำหนดตำแหน่งให้ Canvas Element อยู่ตรงกลางเว็บเบราว์เซอร์

ทดสอบการทำงานของโค๊ดทั้งหมด

ตัวอย่างการทำงาน HTML5-โหลดรูปเข้ามาแสดงใน-Canvas-ด้วย-Ajax.html

Summary
HTML5 โหลดรูปเข้ามาแสดงใน Canvas
Article Name
HTML5 โหลดรูปเข้ามาแสดงใน Canvas
Description
ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง drawImage ของ context 2d เพื่อวาดรูปให้แสดงผลบน Canvas
Author
Publisher Name
บริษัท โค๊ดบี จำกัด
Publisher Logo

กระทู้ใกล้เคียง

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ P... HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความส...
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas... HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ...
แปลง flash จัดการกับ flash ในเว็บเก่าให้เป็น html5... แปลง flash จัดการกับ flash ให้กลายเป็น html5 หากย้อนกลับไป 3-4 ปีที่ผ่านมา flash คือเทคโนโลยีสำหรับการสร้างงาน animation และงาน Interactive ที่นัก...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...

Comments

comments