क्या एचटीएमएल 5 कैनवास टेक्स्ट एपीआई के साथ टेक्स्ट सजावट (अंडरलाइन इत्यादि) खींचना संभव है?

Question

मैं कुछ स्ट्रिंग (कैनवास.फिलटेक्स्ट) प्रदर्शित करने के लिए एचटीएमएल 5 कैनवास एपीआई का उपयोग कर रहा हूं, और मैं सोच रहा था कि टेक्स्ट सजावट (जैसे अंडरलाइन, स्ट्राइकथ्रू इत्यादि) कैनवास एपीआई के साथ कुछ संभव था। दुर्भाग्य से मुझे इसके बारे में कुछ नहीं मिला। मुझे मिला एकमात्र समाधान मैन्युअल रूप से कैनवास ड्राइंग एपीआई का उपयोग करके सजावट करना था (मेरा मतलब है, उदाहरण के लिए, क्षैतिज रेखा को स्पष्ट रूप से चित्रित करना, 'अंडरलाइन' सजावट की नकल करना)। क्या कैनवास टेक्स्ट एपीआई का उपयोग करना कुछ संभव है?

धन्यवाद पैट्रिक

Answer 1

मैं माफी चाहता हूँ कहना है कि इस सवाल का जवाब 'नहीं' है। text methods of the HTML Canvas Context में कोई 'टेक्स्ट-सजावट' या समान शैलियों उपलब्ध नहीं हैं।

Answer 2

यह एक अंतर्निहित विधि के साथ काम नहीं करेगा, लेकिन यहां एक सरल कार्य है जिसे मैंने सफलतापूर्वक पढ़ने के आधार पर उपयोग किया है। http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround/

var underline = function(ctx, text, x, y, size, color, thickness ,offset){ 
    var width = ctx.measureText(text).width; 

    switch(ctx.textAlign){ 
    case "center": 
    x -= (width/2); break; 
    case "right": 
    x -= width; break; 
    } 

    y += size+offset; 

    ctx.beginPath(); 
    ctx.strokeStyle = color; 
    ctx.lineWidth = thickness; 
    ctx.moveTo(x,y); 
    ctx.lineTo(x+width,y); 
    ctx.stroke(); 

} 

Answer 3

पैट्रिक, तुम इतनी तरह fillRect का उपयोग करके आसानी से कर सकते हैं:

ctx.fillText("Hello World", 0, 0); 
var text = ctx.measureText("Hello World"); 
ctx.fillRect(xPos, yPos, text.width, 2); 

इस दृष्टिकोण के बारे में केवल कठिन हिस्सा वहाँ ऊंचाई उपयोग measureText प्राप्त करने के लिए कोई रास्ता नहीं है। अन्यथा, आप अपने fillRect ड्राइंग करते समय अपने वाई समन्वय के रूप में उपयोग कर सकते हैं।

आपकी वाई स्थिति केवल आपके टेक्स्ट की ऊंचाई पर निर्भर करेगी और आप कितनी नज़दीकी रेखा को पसंद करेंगे।