मैं HTML5 कैनवास टेक्स्ट को बोल्ड और / या इटैलिक कैसे करता हूं?

Question 1

मैं एक कैनवस पर एक बहुत सीधे आगे के तरीके से टेक्स्ट प्रिंट कर रहा हूं:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

लेकिन मैं टेक्स्ट को बोल्ड, इटैलिक या दोनों में कैसे बदल सकता हूं? उस सरल उदाहरण को ठीक करने के लिए कोई सुझाव?

Question 2

आप इनमें से किसी का भी उपयोग कर सकते हैं:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

अधिक जानकारी के लिए, यहाँ कुछ संसाधन हैं:

Question 3

किसी भी व्यक्ति के लिए बस एक अतिरिक्त सिर जो इस तरह से ठोकर खाता है: स्वीकृत उत्तर में दिखाए गए आदेश का पालन करना सुनिश्चित करें।

मैं कुछ क्रॉस-ब्राउज़र मुद्दों में भाग गया जब मेरे पास गलत आदेश था। Chrome में "10px वर्दाना बोल्ड" काम करता है, लेकिन IE या फ़ायरफ़ॉक्स में नहीं। संकेत के रूप में इसे "बोल्ड 10 पीएक्स वर्डडाना" में बदलकर उन समस्याओं को ठीक किया गया। यदि आप समान समस्याओं में चलते हैं, तो उस क्रम को दोबारा जांचें।

Question 4

इसलिए जेएस कमांड में सिर्फ font-weight( font-sizeया font-family...) सेट करने का कोई तरीका नहीं है ? यह सब एक पूर्ण फ़ॉन्ट स्ट्रिंग में होना है?

Question 5

कैनवास के किसी भी तरीके या गुणों के माध्यम से रेखांकन संभव नहीं है। लेकिन मैंने इसे पूरा करने के लिए कुछ काम किया। आप इसे देख सकते हैं @ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-under-Invraction

आप यहाँ पर कार्यान्वयन पा सकते हैं http://jsfiddle.net/durgesh0000/KabZG/

Question 6

यदि आपको फ़ॉर्मेटिंग में भिन्नता के लिए अनुमति देने की आवश्यकता है, तो आप एक फॉन्ट स्टाइल सेट कर सकते हैं, टेक्स्ट आकर्षित कर सकते हैं, इसका उपयोग कर माप सकते हैं measureText, एक नई शैली सेट कर सकते हैं, और फिर अगला ब्लॉक इस तरह खींच सकते हैं:

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);

<canvas id="my-canvas" width="250" height="150"></canvas>

स्निपेट का विस्तार करें

मैं HTML5 कैनवास टेक्स्ट को बोल्ड और / या इटैलिक कैसे करता हूं?

आगे की पढाई