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

Eric Bidelman

Twitter GitHub หน้าแรก

การสร้างภาพเคลื่อนไหวของภาพพื้นหลัง

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

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

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

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

มีปัญหา 2 ประการดังนี้

1. URL data: จะเพิ่มโอเวอร์เฮดขนาดประมาณ 33% ลงในรูปภาพผลลัพธ์
2. DOM ด้วยการแตะจำนวนมาก (el.style)

ทั้ง 2 วิธีไม่มีประสิทธิภาพ สำหรับเว็บแอป 60 FPS ที่นุ่มนวลและราบรื่นไม่มีประสิทธิภาพ

การใช้ Canvas แบบ 2 มิติเป็นพื้นหลัง

การสาธิต

ผลที่ได้คือมี 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 เพียง 1 รายการต่อเอกสารเท่านั้น เมื่อคุณได้รับบริบทของภาพวาด คุณจะต้องระบุขนาดด้วย ระบบจะไม่ล้างภาพพิมพ์แคนวาสตราบใดที่คุณขอขนาดเดียวกันซ้ำ การระบุขนาดใหม่จะเท่ากับลักษณะการทำงานที่คุณคาดไว้หากคุณปรับขนาดองค์ประกอบ <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 แค่เปลี่ยนเป็น "testal-webgl" แทน "2d" เท่านั้น

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

ต่อไปนี้คือการพิสูจน์แนวคิดที่มี div พร้อมพื้นหลังซึ่งวาดโดยใช้จุดยอดมุมและตัวปรับเฉดสีส่วนย่อย ตัวอย่าง

วิธีการอื่นๆ

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