कैनवस एक लोकप्रिय तरीका है स्क्रीन पर हर तरह के ग्राफ़िक्स बनाना और WebGL की दुनिया का एंट्री पॉइंट बनाना. इसका इस्तेमाल आकृतियां बनाने, इमेज बनाने, ऐनिमेशन चलाने या वीडियो कॉन्टेंट को दिखाने और प्रोसेस करने के लिए भी किया जा सकता है. इसका उपयोग अक्सर मीडिया-रिच वेब ऐप्लिकेशन में सुंदर उपयोगकर्ता अनुभव बनाने के लिए किया जाता है और ऑनलाइन गेम.
इसे स्क्रिप्ट किया जा सकता है. इसका मतलब है कि कैनवस पर बनाए गए कॉन्टेंट को प्रोग्राम के हिसाब से, प्रोग्राम के हिसाब से बनाया जा सकता है. उदाहरण के लिए, JavaScript में. इससे कैनवस में काफ़ी सहूलियत मिलती है.
साथ ही, आधुनिक वेबसाइटों में, स्क्रिप्ट एक्ज़ीक्यूशन उन सबसे आम प्रोसेस में से एक है उपयोगकर्ता की रिस्पॉन्सिवनेस के सोर्स से जुड़ी समस्याओं के बारे में जानकारी. कैनवस लॉजिक और रेंडरिंग उसी थ्रेड पर होती है जिस पर उपयोगकर्ता इंटरैक्शन करता है, ऐनिमेशन में शामिल (कभी-कभी भारी कैलकुलेशन) से ऐप्लिकेशन की असली परफ़ॉर्मेंस और अनुमानित परफ़ॉर्मेंस.
अच्छी बात यह है कि OffscreenCanvas उस खतरे का जवाब है.
पहले, कैनवस ड्रॉइंग की सुविधाएं <canvas> एलिमेंट से जुड़ी होती थीं,
इसका मतलब है कि यह सीधे तौर पर डीओएम पर निर्भर करता था. ऑफ़स्क्रीन कैनवस, जैसा कि इसके नाम से पता चलता है,
DOM और Canvas API को स्क्रीन से अलग करके उसे अलग करता है.
इस अलग करने की वजह से, OffscreenCanvas की रेंडरिंग को डीओएम से पूरी तरह से अलग कर दिया गया है और इसलिए कोई सिंक्रोनाइज़ेशन नहीं होने की वजह से सामान्य कैनवस की तुलना में इसकी स्पीड में कुछ सुधार होता है करते हैं.
हालांकि, इसके अतिरिक्त यह है कि इसका उपयोग वेब कर्मचारी में किया जा सकता है, भले ही ऐसा कोई DOM उपलब्ध है. इससे सभी तरह के दिलचस्प इस्तेमाल के उदाहरण मिल पाते हैं.
वर्कर में ऑफ़स्क्रीन कैनवस का इस्तेमाल करना
कर्मचारी वेब के थ्रेड के वर्शन हैं—ये आपको बैकग्राउंड में टास्क चलाने देते हैं.
अपनी कुछ स्क्रिप्टिंग को किसी वर्कर पर ले जाने से आपके ऐप्लिकेशन को उपयोगकर्ता के लिए महत्वपूर्ण प्रदर्शन करने में ज़्यादा हेडरूम मिलता है टास्क पर नज़र रखें. ऑफ़स्क्रीनकैनवस के बिना, वर्कर में कैनवस एपीआई का इस्तेमाल करने का कोई तरीका नहीं था, क्योंकि कोई DOM उपलब्ध नहीं था.
ऑफ़स्क्रीन कैनवास, डीओएम पर निर्भर नहीं करता. इसलिए, इसका इस्तेमाल किया जा सकता है. नीचे दिए गए उदाहरण में OffscreenCanvas का इस्तेमाल किया गया है किसी वर्कर में ग्रेडिएंट रंग की गणना करने के लिए:
// file: worker.js
function getGradientColor(percent) {
const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, ctx.canvas.width, 1);
const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}
getGradientColor(40); // rgba(152, 0, 104, 255 )
मुख्य थ्रेड को अनब्लॉक करें
कर्मचारी की ओर से गणना करने पर ज़्यादा खर्च करने से वह खाली हो जाती है अहम संसाधन मौजूद हैं. transferControlToOffscreen का इस्तेमाल करें का इस्तेमाल करें. कार्रवाइयां इस पर लागू की गईं ऑफ़स्क्रीन कैनवस को सोर्स कैनवस पर अपने-आप रेंडर किया जाएगा.
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);
नीचे दिए गए उदाहरण में, रंग की थीम बदलने पर भारी कैलकुलेशन होती है—यह ऐसी होनी चाहिए तो डेस्कटॉप पर भी कुछ मिलीसेकंड लगते हैं. आप मुख्य थ्रेड पर ऐनिमेशन चलाना चुन सकते हैं या काम करने वाले में. मुख्य थ्रेड के मामले में, भारी होने पर बटन का इस्तेमाल नहीं किया जा सकता टास्क चल रहा है—थ्रेड ब्लॉक किया गया है. कर्मचारी के मामले में, कोई भी असर यूज़र इंटरफ़ेस (यूआई) का रिस्पॉन्स.
यह दूसरे तरीके से भी काम करता है: व्यस्त मुख्य थ्रेड की वजह से चालू होने वाले ऐनिमेशन पर कोई असर नहीं पड़ता एक कर्मचारी. इस सुविधा का इस्तेमाल करके, विज़ुअल जैंक से बचा जा सकता है और बेहतरीन ऐनिमेशन की गारंटी दी जा सकती है मुख्य थ्रेड के ट्रैफ़िक के बावजूद, जैसा कि नीचे दिए गए डेमो में दिखाया गया है.
सामान्य कैनवस के मामले में, मुख्य थ्रेड पर गलत तरीके से ज़्यादा काम करने पर ऐनिमेशन रुक जाता है, हालांकि, कर्मचारी का ऑफ़स्क्रीन कैनवस बिना किसी रुकावट के चलता रहेगा.
लोकप्रिय लाइब्रेरी के साथ इस्तेमाल करें
आम तौर पर, OffscreenCanvas API को सामान्य कैनवस एलिमेंट के साथ इस्तेमाल किया जा सकता है. इसे बेहतर बनाने के लिए, बाज़ार में मौजूद कुछ लोकप्रिय ग्राफ़िक लाइब्रेरी के साथ भी इसका इस्तेमाल किया जा सकता है.
उदाहरण के लिए, 'सुविधा का पता लगाएं' सुविधा इस्तेमाल की जा सकती है और अगर उपलब्ध हो, तो वैल्यू के तौर पर तीन. रेंडरर कंस्ट्रक्टर में कैनवस विकल्प:
const canvasEl = document.querySelector('canvas');
const canvas =
'OffscreenCanvas' in window
? canvasEl.transferControlToOffscreen()
: canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});
यहां एक समझ है कि Three.js के लिए कैनवस में style.width और style.height प्रॉपर्टी होनी चाहिए.
ऑफ़स्क्रीन कैनवास में यह मौजूद नहीं है, क्योंकि यह डीओएम से पूरी तरह अलग है. इसलिए, आपको इसे खुद उपलब्ध कराना होगा,
इन दो हिस्सों में काट-छांट करें या ऐसा तर्क दें जो इन वैल्यू को ओरिजनल वैल्यू से जोड़ता हो
कैनवस डाइमेंशन.
किसी वर्कर में तीन.js बेसिक ऐनिमेशन चलाने का तरीका नीचे बताया गया है:
ध्यान रखें कि कुछ DOM संबंधित API वर्कर में आसानी से उपलब्ध नहीं होते हैं, इसलिए अगर अगर आपको टेक्सचर जैसी तीन बेहतर सुविधाएं इस्तेमाल करनी हैं, तो आपको अन्य विकल्पों की ज़रूरत पड़ सकती है. इनके साथ एक्सपेरिमेंट शुरू करने के कुछ आइडिया पाने के लिए, यहां जाएं: Google I/O 2017 का वीडियो.
कैनवस की ग्राफ़िक सुविधाओं का ज़्यादा इस्तेमाल करने पर, OffscreenCanvas को बेहतर तरीके से ऐप्लिकेशन की परफ़ॉर्मेंस पर असर डाल सकते हैं. कर्मचारियों को कैनवस रेंडरिंग संदर्भ उपलब्ध कराने से बढ़ोतरी होती है वेब ऐप्लिकेशन में समानता और मल्टी-कोर सिस्टम को बेहतर ढंग से इस्तेमाल करता है.