ภาพพื้นหลังที่สร้างด้วย Canvas

Eric Bidelman

การทำภาพพื้นหลังเคลื่อนไหวแบบเป็นโปรแกรม

วิธีหลักๆ 2 วิธีในการทำให้ภาพพื้นหลังเคลื่อนไหวมีดังนี้

1. ใช้ CSS Sprite เพื่ออัปเดต background-position ใน JS
2. Hacks with .toDataURL()

ตัวเลือกแรกเหมาะอย่างยิ่งหากคุณมีรูปภาพล่วงหน้า แต่จะเกิดอะไรขึ้นหากแหล่งที่มาต้องสร้างขึ้นแบบเป็นโปรแกรม เช่น <canvas> โซลูชันสำหรับข้อ 1 คือการใช้ .toDataURL() บนผืนผ้าใบและตั้งค่าพื้นหลังเป็น URL ที่สร้างขึ้น

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

การดำเนินการนี้มีปัญหา 2 อย่าง ได้แก่

1. data: URL จะเพิ่มขนาดของรูปภาพที่ได้ประมาณ 33%
2. การเข้าถึง DOM จำนวนมาก (el.style)

ทั้ง 2 วิธีนี้ใช้ไม่ได้ผลและไม่เหมาะสมกับเว็บแอปที่ทำงานได้อย่างราบรื่นเสมอที่ 60 fps

การใช้ภาพพิมพ์แคนวาส 2 มิติเป็นพื้นหลัง

DEMO

ปรากฏว่ามี API ที่ไม่เป็นไปตามมาตรฐานซึ่ง WebKit มีมาหลายปีแล้ว ซึ่งสามารถใช้ Canvas เป็นพื้นหลังได้ แต่ขออภัย ยังไม่มีการเผยแพร่ข้อมูลจำเพาะสำหรับฟีเจอร์นี้

ก่อนอื่น ให้ทำดังนี้แทนการระบุ URL สําหรับการย้อนกลับ

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

ใช้ -webkit-canvas() โดยอ้างอิงตัวระบุสตริงไปยังบริบทของ Canvas

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

ถัดไปเราต้องสร้างบริบท 2 มิติด้วย .getContext() เวอร์ชันพิเศษ ดังนี้

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

หมายเหตุ: วิธีการนี้อยู่ในออบเจ็กต์ document ไม่ใช่ใน Canvas โดยอาร์กิวเมนต์ที่ 2 จะใช้ชื่อเดียวกับที่ใช้ใน -webkit-canvas()

ข้อมูลเพิ่มเติมจาก Dave Hyatt

หมายเหตุ: เอกสารหนึ่งๆ จะมี Canvas ของ CSS สำหรับตัวระบุส่วนกลางหนึ่งๆ ได้เพียงรายการเดียว เมื่อคุณได้รับบริบทการวาดภาพแล้ว คุณจะต้องระบุขนาดด้วย ระบบจะไม่ล้างภาพพิมพ์แคนวาสตราบใดที่คุณขอขนาดเดิมซ้ำๆ การระบุขนาดใหม่จะเหมือนกับลักษณะการทำงานที่คุณคาดหวังหากปรับขนาดองค์ประกอบ <canvas> และระบบจะล้างบัฟเฟอร์ของ Canvas

หมายเหตุ: ออบเจ็กต์ทั้งหมดที่สังเกตเห็น Canvas ของ CSS ที่มีชื่อเดียวกันจะแชร์ Canvas นั้น ซึ่งหมายความว่า (คล้ายกับวิธีการทำงานของ GIF แบบเคลื่อนไหว) คุณสามารถสร้างภาพเคลื่อนไหวและทำให้ภาพเคลื่อนไหวเหล่านั้นเกิดขึ้นพร้อมกันในไคลเอ็นต์ทั้งหมดของ Canvas ระบบจะเผยแพร่การเปลี่ยนแปลงการวาดไปยังไคลเอ็นต์ทั้งหมดโดยอัตโนมัติ

ภาพเคลื่อนไหว

ดังที่เห็นในตัวอย่าง เราสามารถใช้ requestAnimationFrame() ซ้ำเพื่อขับเคลื่อนภาพเคลื่อนไหวได้ ซึ่งดีมาก เนื่องจากเมื่อเชื่อมต่อแล้ว การเชื่อมโยงระหว่าง CSS กับองค์ประกอบ Canvas จะยังคงอยู่ คุณไม่จำเป็นต้องยุ่งเกี่ยวกับ DOM

เดโมไม่แสดงภาพเคลื่อนไหวใน Chrome

เวอร์ชันเสถียรปัจจุบันของ Chrome (เวอร์ชัน 23) มี crbug.com/161699 ซึ่งป้องกันไม่ให้ภาพเคลื่อนไหว requestAnimationFrame() อัปเดตพื้นหลังอย่างถูกต้อง ปัญหานี้ได้รับการแก้ไขแล้วใน Chrome 25 (ปัจจุบันคือ Canary) เดโมก็ควรทํางานได้ดีใน Safari ปัจจุบัน

ประโยชน์ด้านประสิทธิภาพ

เรากำลังพูดถึงภาพพิมพ์แคนวาส ภาพเคลื่อนไหวที่เร่งด้วยฮาร์ดแวร์พร้อมใช้งานแล้ว (อย่างน้อยก็ในเบราว์เซอร์ที่ฟีเจอร์นี้ใช้งานได้) ขอย้ำอีกครั้งว่าคุณไม่จำเป็นต้องยุ่งกับ DOM จาก JS

การใช้ WebGL เป็นพื้นหลัง

เดี๋ยวก่อน หมายความว่าเราสามารถใช้พื้นหลัง CSS โดยใช้ WebGL ได้ไหม แน่นอน WebGL เป็นเพียงบริบท 3 มิติสําหรับ Canvas เพียงเปลี่ยนเป็น "experimental-webgl" แทน "2d" เท่านี้ก็เรียบร้อย

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

ต่อไปนี้คือตัวอย่างแนวคิดที่มี div ที่มีพื้นหลังวาดโดยใช้ Vertex และ Fragment Shader: DEMO

แนวทางอื่นๆ

โปรดทราบว่า Mozilla มี -moz-element() (MDN) มาเป็นเวลานานแล้ว รูปแบบคำสั่งนี้เป็นส่วนหนึ่งของข้อกำหนดค่ารูปภาพ CSS และข้อกำหนดของโมดูลเนื้อหาที่แทนที่ระดับ 4 และช่วยให้คุณสร้างรูปภาพที่สร้างขึ้นจาก HTML ที่กำหนดเองได้ ไม่ว่าจะเป็นวิดีโอ ภาพพิมพ์แคนวาส เนื้อหา DOM หรืออะไรก็ตาม อย่างไรก็ตาม การมีสิทธิ์เข้าถึงภาพสแนปชอตของ DOM อย่างเต็มรูปแบบก็ทำให้เกิดข้อกังวลด้านความปลอดภัย นี่เป็นเหตุผลหลักที่เบราว์เซอร์อื่นๆ ไม่ได้ใช้ฟีเจอร์ดังกล่าว