एचटीएमएल कैनवास टेक्स्टबेसलाइन संपत्ति
उदाहरण
y=100 पर एक लाल रेखा बनाएं, फिर प्रत्येक शब्द को y=100 पर अलग-अलग टेक्स्टबेसलाइन मानों के साथ रखें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Draw a red line at y = 100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px Arial"
//Place each word at y = 100 with different textBaseline values
ctx.textBaseline = "top";
ctx.fillText("Top", 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 50, 100);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 120, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 190, 100);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 290, 100);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
नोट: टेक्स्टबेसलाइन प्रॉपर्टी अलग-अलग ब्राउज़रों में अलग-अलग तरीके से काम करती है, खासकर "हैंगिंग" या "आइडियोग्राफिक" का उपयोग करते समय।
परिभाषा और उपयोग
टेक्स्ट बेसलाइन प्रॉपर्टी टेक्स्ट बनाते समय उपयोग की जाने वाली वर्तमान टेक्स्ट बेसलाइन को सेट या लौटाती है।
नीचे दिया गया उदाहरण टेक्स्टबेसलाइन विशेषता द्वारा समर्थित विभिन्न आधार रेखाओं को प्रदर्शित करता है:
नोट: कैनवास पर टेक्स्ट को पोजिशन करते समय फिलटेक्स्ट () और स्ट्रोकटेक्स्ट () विधियाँ निर्दिष्ट टेक्स्टबेसलाइन मान का उपयोग करेंगी।
| डिफ़ॉल्ट मान: | वर्णानुक्रमक |
|---|---|
| जावास्क्रिप्ट सिंटैक्स: | संदर्भ .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
सम्पत्ति की कीमत
| Values | Description | Play it |
|---|---|---|
| alphabetic | Default. The text baseline is the normal alphabetic baseline | |
| top | The text baseline is the top of the em square | |
| hanging | The text baseline is the hanging baseline | |
| middle | The text baseline is the middle of the em square | |
| ideographic | The text baseline is the ideographic baseline | |
| bottom | The text baseline is the bottom of the bounding box |
❮ HTML कैनवास संदर्भ