HTML कैनवस रेफरेंस मैनुअल

HTML कैनवस रेफरेंस मैनुअल

HTML <canvas> टैग, जो स्क्रिप्ट (आमतौर पर JavaScript) के द्वारा ग्राफिक्स डायनेमिक रूप से ड्राइंग के लिए उपयोग किया जाता है。

HTML <canvas> के बारे में अधिक जानकारी के लिए हमारे HTML Canvas ट्यूटोरियल को पढ़ें。

रंग, शैली और शेडो

गुण वर्णन
fillStyle भरे कला के रंग, ग्रेडिएंट या पैटर्न को सेट करें या लॉग रहा है
strokeStyle स्ट्रोक के रंग, ग्रेडिएंट या पैटर्न को सेट करें या लॉग रहा है
shadowColor शेडो का रंग सेट करें या लॉग रहा है
shadowBlur शेडो के झूम को सेट करें या लॉग रहा है
shadowOffsetX शेडो को रूप के बाहरी दूरी को सेट करें या लॉग रहा है
shadowOffsetY शेडो को रूप के ऊपरी दूरी को सेट करें या लॉग रहा है
विधि वर्णन
createLinearGradient() ग्रेडिएंट (कैनवस सामग्री पर उपयोग) को बनाएं
createPattern() दिये गए दिशा में निर्दिष्ट एलिमेंट को दोहराएं
createRadialGradient() विकेंद्रित/चक्राकार ग्रेडिएंट (कैनवस सामग्री पर उपयोग) को बनाएं
addColorStop() ग्रेडिएंट ऑब्जेक्ट में रंग और स्थिति को निर्धारित करें

रेखा शैली

गुण वर्णन
lineCap रेखा के अंत के रूप-रंग को सेट करें या लॉग रहा है
lineJoin रेखाओं के अंतर में अंतर्विन्यास को सेट करें या लॉग रहा है
lineWidth चालू रेखा की चौड़ाई को सेट करें या लॉग रहा है
miterLimit अधिकतम ढाल की लंबाई को सेट करें या लॉग रहा है

चतुर्भुज

विधि वर्णन
rect() चतुर्भुज को बनाएं
fillRect() भरे चतुर्भुज को आरेखित करें
strokeRect() चतुर्भुज (बिना भरे) को आरेखित करें
clearRect() दिये गए चतुर्भुज के भीतर निर्दिष्ट पिक्सेल को साफ करें

रेखा

विधि वर्णन
fill() चालू ड्राइंग (रेखा) को भरें
stroke() परिभाषित रेखा को आरेखित करें
beginPath() एक नई रेखा शुरू करें, या मौजूदा रेखा को पुन:सेट करें
moveTo() रेखा को कैनवस में निर्दिष्ट बिंदु पर ले जाएं, लेकिन रेखा नहीं बनाएं
closePath() चालू रेखा को अंतिम बिंदु से प्रारंभिक बिंदु तक की रेखा बनाएं
lineTo() एक नई बिंदु जोड़ें, फिर उस बिंदु से लेकर अंतिम निर्दिष्ट बिंदु तक की रेखा कैनवस में बनाएं
clip() मूल कैनवस से किसी भी आकार और आकृति का क्षेत्र काटें
quadraticCurveTo() दो बहुकोणीय वक्र को बनाता है
bezierCurveTo() तीन बहुकोणीय वक्र को बनाता है
arc() दायरा/वक्र को बनाता है (दायरा या अंशदायरा के लिए इस्तेमाल किया जाता है)
arcTo() दो टाइनियन के बीच की दायरा/वक्र को बनाता है
isPointInPath() यदि निर्दिष्ट स्थान वर्तमान पथ में है तो true वापस करता है अन्यथा false

ट्रांसफॉर्म

विधि वर्णन
scale() वर्तमान चित्रीकरण को बड़ा या छोटा करता है
rotate() वर्तमान चित्रीकरण को घुमाता है
translate() चित्रकूदड़ी पर (0,0) स्थान को नये स्थान के लिए नया स्थान निर्धारित करता है
transform() चित्रीकरण के वर्तमान ट्रांसफॉर्म मैट्रिक्स को प्रतिस्थापित करता है
setTransform() वर्तमान ट्रांसफॉर्म को एक इकाई मैट्रिक्स में रीसेट करता है। फिर transform() चलाएं

टेक्स्ट

गुण वर्णन
font टेक्स्ट सामग्री के वर्तमान फ़ॉन्ट गुण को सेट करता है या वापस करता है
textAlign टेक्स्ट सामग्री के वर्तमान अनुरूपकरण को सेट करता है या वापस करता है
textBaseline टेक्स्ट चित्रीकरण के दौरान इस्तेमाल किए जाने वाले वर्तमान टेक्स्ट बेस लाइन को सेट करता है या वापस करता है
विधि वर्णन
fillText() चित्रकूदड़ी पर 'भरे' टेक्स्ट को चित्रित करता है
strokeText() टेक्स्ट को चित्रकूदड़ी पर चित्रित करता है (गैर-भरना)
measureText() निर्दिष्ट टेक्स्ट की चौड़ाई वाला ऑब्जैक्ट को वापस करता है

चित्र चित्रीकरण

विधि वर्णन
drawImage() चित्र, चित्रकूदड़ी या वीडियो को चित्रकूदड़ी पर चित्रित करता है

पिक्सल संचार

गुण वर्णन
width ImageData ऑब्जैक्ट की चौड़ाई को वापस करता है
height ImageData ऑब्जैक्ट की ऊंचाई को वापस करता है
data एक ऑब्जैक्ट वापस करता है जो निर्दिष्ट ImageData ऑब्जैक्ट के चित्र डाटा को शामिल करता है
विधि वर्णन
createImageData() नई, खाली ImageData ऑब्जैक्ट को बनाता है
getImageData() ImageData ऑब्जैक्ट वापस करता है जो चित्रकूदड़ी पर निर्दिष्ट चतुर्भुज के आयतन के लिए पिक्सल डाटा की नक़ल है
putImageData() चित्र डाटा (निर्दिष्ट ImageData ऑब्जैक्ट से) को चित्रकूदड़ी पर वापस लाता है

संयोजन

गुण वर्णन
globalAlpha चित्रीकरण के वर्तमान alpha या पारदर्शी मान को सेट करता है या वापस करता है
globalCompositeOperation नई छवि को पहले की छवि पर कैसे चित्रित करने को सेट करता है या वापस करता है

अन्य

विधि वर्णन
save() वर्तमान पर्यावरण की स्थिति को सहेजता है
restore() पिछले सहेजे गए पथ की स्थिति और गुणों को वापस देता है
createEvent() 　
getContext() 　
toDataURL()