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

Eric Bidelman

การสร้างภาพเคลื่อนไหวของภาพพื้นหลังโดยใช้โปรแกรม

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

1. ใช้ CSS Sprite เพื่ออัปเดต background-position ใน JS
2. เคล็ดลับเกี่ยวกับ .toDataURL()

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

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

ซึ่งมีปัญหา 2 อย่างดังนี้

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

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

การใช้ Canvas แบบ 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 จะล้าง

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

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

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

หากเดโมไม่เคลื่อนไหวใน Chrome

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

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

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

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

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

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

นี่คือการพิสูจน์แนวคิดที่มี div ที่มีพื้นหลังซึ่งวาดโดยใช้ Vertex และ Fragment Shader: DEMO

วิธีอื่นๆ

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