ความคิดเห็น: ทุกคนรู้ว่าเบราว์เซอร์ทั้งหมดไม่สนับสนุน HTML5 ในปัจจุบัน แม้แต่เบราว์เซอร์ที่รองรับ HTML5 อาจไม่รองรับคุณสมบัติใหม่ทั้งหมดของ HTML5 ขอแนะนำให้คุณใช้ Firefox (โปรดปรานของนักพัฒนา) หรือเบราว์เซอร์ Chrome ตัวอย่างทั้งหมดของฉันได้รับการพัฒนาตาม Firefox
เริ่มตั้งแต่วันนี้เราจะเริ่มต้นชุดหลักสูตรบนผืนผ้าใบ HTML5 ซีรี่ส์นี้เป็นบทสรุปของฉันหลังจากอ่าน "HTML5 Canvas: การโต้ตอบดั้งเดิมและภาพเคลื่อนไหวสำหรับเว็บ" เพื่อนที่สนใจสามารถดาวน์โหลดหนังสือภาษาอังกฤษต้นฉบับเพื่ออ่าน หนังสือเล่มนี้แสดงให้เราเห็นฟังก์ชั่นที่ทรงพลังของผ้าใบโดยแนะนำการพัฒนาผ้าใบ ฉันคิดว่ามันค่อนข้างดี ฉันได้เรียนรู้มากมายเกี่ยวกับผืนผ้าใบโดยการอ่านหนังสือเล่มนี้ ในความเป็นจริงมี API ไม่มากในผืนผ้าใบ กุญแจสำคัญคือการเรียนรู้และใช้พวกเขาอย่างแข็งขันและเรียนรู้ที่จะสร้างผลลัพธ์ที่น่าทึ่งสำหรับการรวมกันของ API และหนังสือเล่มนี้เป็นตัวเลือกที่ดีที่สุดสำหรับการเรียนรู้ผ้าใบ เป็นเรื่องน่าเสียดายที่ยังไม่มีเวอร์ชันภาษาจีน เพื่อนที่มีภาษาอังกฤษไม่ดีสามารถรอได้เท่านั้นอย่างที่เราทราบกันดีว่าเบราว์เซอร์ทั้งหมดไม่สนับสนุน HTML5 และแม้แต่เบราว์เซอร์ที่รองรับ HTML5 อาจไม่สนับสนุนคุณสมบัติใหม่ทั้งหมดของ HTML5 ดังนั้นทุกคนควรเลือกเบราว์เซอร์ที่ค่อนข้างใหม่เป็นสภาพแวดล้อมการดีบัก ขอแนะนำให้คุณใช้ Firefox (โปรดปรานของนักพัฒนา) หรือเบราว์เซอร์ Chrome ตัวอย่างทั้งหมดของฉันได้รับการพัฒนาตาม Firefox
ฉันจะไม่แนะนำความรู้พื้นฐานที่เกี่ยวข้องกับ HTML5 ที่นี่ มีบทเรียนมากมายเกี่ยวกับ HTML5 บนอินเทอร์เน็ตดังนั้นฉันจึงสามารถเรียนรู้ได้ด้วยตัวเอง ในการเรียนรู้ HTML5 คุณต้องมีรากฐานที่ดีกว่าใน JavaScript คุณสามารถไปที่บล็อกของลุงทอมเพื่อเรียนรู้: ในความเป็นจริงหลักสูตรชุดนี้ค่อนข้างยาก หากคุณศึกษาบทความมากกว่า 50 บทความคุณควรได้รับการพิจารณาว่าเป็นผู้เชี่ยวชาญ JS
ตอนนี้เราเริ่มหลักสูตร Canvas อย่างเป็นทางการตัวอย่างแรก: Hello Canvas
ก่อนอื่นคุณต้องเพิ่มแท็ก Canvas ในร่างกายดังนี้:
<Canvas>
เบราว์เซอร์ของคุณไม่รองรับ HTML5 Canvas
</sanvas>
ส่วนข้อความในผ้าใบจะปรากฏขึ้นเมื่อเบราว์เซอร์ไม่รองรับวัตถุ Canvas
แท็กผ้าใบถูกกำหนดไว้ เมื่อเราต้องการใช้งานผ่าน JS สามารถนำไปใช้งานได้ผ่าน GetElementById
var thecanvas = document.getElementById (Canvasone); ตอนนี้เราคุ้นเคยกับการใช้ jQuery เพื่อพัฒนางานดังนั้นวิธีรับวัตถุ Canvas โดยใช้ jQuery?
var canvas = $ ('#canvasone') รับ (0); หรือ var canvas = $ ('#canvasone') [0]; ฉันไม่รู้ว่าได้รับ (0) และ [0] ไม่มีมัน หากคุณไม่ใช้เมธอด Get () หรือ [] ตัวห้อย [] รหัส JS ของคุณจะไม่สามารถใช้งานผืนผ้าใบได้ตามปกติ เพราะ $ ('#canvasone') ได้รับวัตถุ jQuery และสิ่งที่เราต้องการใช้งานจริงคือวัตถุ HTML DOM มีปัญหาที่วัตถุ jQuery ถูกแปลงเป็นวัตถุ DOM และการแปลงนี้เสร็จสิ้นผ่าน Get () หรือตัวห้อย หากคุณต้องการแปลงวัตถุ DOM เป็นวัตถุ jQuery คุณสามารถใช้วิธี $ () เพื่อใช้งานได้ เพื่อนของฉันที่ไม่ชัดเจนเกี่ยวกับเรื่องนี้มีคนเดียวที่ไป Baidu ด้วยตัวเองดังนั้นฉันจะไม่เข้าไปในเชิงลึกที่นี่
เพื่อให้แน่ใจว่าความทนทานของรหัสเราจำเป็นต้องพิจารณาว่าเบราว์เซอร์ของคุณรองรับวัตถุผ้าใบซึ่งสามารถนำไปใช้ได้ผ่านรหัสต่อไปนี้หรือไม่
if (! thecanvas ||! thecanvas.getContext) {
กลับ;
-
อย่างไรก็ตามขอแนะนำให้คุณใช้ห้องสมุด Modernizr.js เพื่อทำงานนี้ให้เสร็จสมบูรณ์ นี่คือห้องสมุด HTML5 JS แบบพาสซีฟมากและมีวิธีการที่มีประโยชน์มากมาย
ฟังก์ชั่น canvassupport () {
คืน Modernizr.canvas;
-
Canvas รองรับการเรนเดอร์ 2D และดำเนินการผ่านรหัสต่อไปนี้:
var context = thecanvas.getContext (2d);
ต่อไปเราสามารถวาดภาพบนผืนผ้าใบผ่านวัตถุบริบท
// ตั้งค่าสีพื้นที่
context.fillstyle = "#ffffa";
// วาดพื้นที่
Context.fillrect (0, 0, 500, 300);
// ตั้งค่าตัวอักษร
context.font = "20px _sans";
// ตั้งค่าการจัดตำแหน่งแนวตั้ง
context.textBaseline = "top";
// วาดข้อความ
Context.fillText ("Hello World!", 195, 80);
// ตั้งค่าสีชายแดน
Context.strokestyle = "#000000";
// วาดเส้นขอบ
Context.strokerect (5, 5, 490, 290);
ภาพวาดของรูปภาพอธิบายไว้ด้านล่าง เนื่องจากการดาวน์โหลดภาพแบบอะซิงโครนัสเพื่อให้แน่ใจว่าเมื่อคุณวาดภาพด้วยผ้าใบภาพได้รับการดาวน์โหลดเราใช้วิธีการต่อไปนี้:
var helloWorldimage = ภาพใหม่ ();
helloWorldimage.src = "helloWorld.gif";
helloWorldimage.onload = function () {
บริบท DRAWIMAGE (HelloWorldimage, 160, 130);
-
เมื่อภาพเสร็จสิ้นเหตุการณ์ ONLOAD จะถูกทริกเกอร์และภาพจะถูกวาดโดยใช้วัตถุบริบท
ทุกคนดาวน์โหลดตัวอย่างเพื่อดูรหัสที่สมบูรณ์ ที่อยู่ดาวน์โหลดตัวอย่าง: html5canvas.helloworld.zip