บทความนี้ส่วนใหญ่แนะนำการสอนเกี่ยวกับการใช้ผ้าใบใน HTML5 เพื่อวาดใบหน้าที่ยิ้มแย้ม การใช้ผ้าใบสำหรับการวาดเป็นฟังก์ชั่นพื้นฐานใน HTML5 เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
วันนี้คุณจะได้เรียนรู้เทคโนโลยีเว็บที่เรียกว่า Canvas และการเชื่อมโยงกับโมเดลวัตถุเอกสาร (มักเรียกว่า DOM) เทคโนโลยีนี้มีประสิทธิภาพมากเพราะช่วยให้นักพัฒนาเว็บสามารถเข้าถึงและแก้ไของค์ประกอบ HTML โดยใช้ JavaScript
ตอนนี้คุณอาจสงสัยว่าทำไมเราต้องใช้ JavaScript Dract ในระยะสั้น HTML และ JavaScript นั้นพึ่งพาซึ่งกันและกันและส่วนประกอบ HTML บางส่วนเช่นองค์ประกอบผ้าใบไม่สามารถใช้เพียงอย่างเดียวจาก JavaScript ท้ายที่สุดถ้าเราไม่สามารถวาดมันได้ผ้าใบสามารถทำอะไรได้บ้าง?
เพื่อให้เข้าใจแนวคิดนี้ได้ดีขึ้นเราจะพยายามวาดหน้ายิ้มเรียบง่ายด้วยโครงการตัวอย่าง เริ่มต้นกันเถอะ
เริ่ม
ก่อนอื่นสร้างไดเรกทอรีใหม่เพื่อบันทึกไฟล์โครงการของคุณจากนั้นเปิดตัวแก้ไขข้อความหรือเครื่องมือพัฒนาเว็บที่คุณชื่นชอบ เมื่อคุณทำสิ่งนี้คุณควรสร้าง index.html ที่ว่างเปล่าและสคริปต์ที่ว่างเปล่า js หลังจากนั้นเราจะแก้ไขต่อไป
ถัดไปลองแก้ไขไฟล์ index.html ซึ่งจะไม่เกี่ยวข้องกับสิ่งต่าง ๆ มากมายเพราะรหัสส่วนใหญ่ในโครงการของเราจะถูกเขียนใน JavaScript สิ่งที่เราต้องทำใน HTML คือการสร้างองค์ประกอบผ้าใบและสคริปต์อ้างอิง js ซึ่งค่อนข้างตรงไปตรงมา:
XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด