क्या मैं एचटीएमएल 5 कैनवास में चरित्र पाठ रंग से कर सकता हूं?

Question

एचटीएमएल कैनवास में मैं ctx.fillStyle = 'red' का उपयोग कर टेक्स्ट की एक पंक्ति का रंग सेट कर सकता हूं, जो कि बढ़िया है। मैं जो करने की कोशिश कर रहा हूं वह पत्र द्वारा रंग सेट करने में सक्षम है, केवल एक बार शब्द को आकर्षित करने के साथ।

तो यदि पाठ 'हैलो अलग-अलग रंग' है, तो क्या कोई तरीका है कि मैं पत्र लाल लाल कर सकता हूं, लेकिन शेष पाठ सफेद हो सकता है?

Answer 1

मैं आपको यह कामकाज प्रस्तुत करता हूं। असल में आप एक बार में अपने टेक्स्ट को एक char आउटपुट करते हैं, और प्रत्येक अक्षर की चौड़ाई निर्धारित करने के लिए इनबिल्ट measureText() फ़ंक्शन का उपयोग करते हैं। फिर हम उस स्थिति को ऑफसेट करते हैं जहां हम उसी राशि से आकर्षित करना चाहते थे। आप जिस प्रभाव को चाहते हैं उसका उत्पादन करने के लिए आप इस स्निपेट को संशोधित कर सकते हैं।

मान लीजिए हम इतनी तरह HTML है:

कार्रवाई at jFiddle में इसे देखें: हम एक आउटपुट प्राप्त होता

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

function randomColor(){ 
    var r = Math.floor(Math.random()*256); 
    var g = Math.floor(Math.random()*256); 
    var b = Math.floor(Math.random()*256); 
    return "rgb("+ r + "," + g + "," + b +")"; 
} 

function texter(str, x, y){ 
    for(var i = 0; i <= str.length; ++i){ 
     var ch = str.charAt(i); 
     ctx.fillStyle = randomColor(); 
     ctx.fillText(ch, x, y); 
     x += ctx.measureText(ch).width; 
    } 
} 

texter("What's up?", 10, 30); 

: तो जैसे

<canvas id="canvas" width="300" height="300"/> 

और जावास्क्रिप्ट। मैंने नवीनतम क्रोम का इस्तेमाल किया।

Answer 2

ctx.fillStyle एक राज्य मशीन के रूप में काम करता है। जब आप ctx.fillStyle = 'red' कहते हैं, तो यह चीजों को लाल रंग में रंग देगा। आप ctx.fillStyle = 'white' सेट करके, जो अक्षर एच लिखते हैं, फिर ctx.fillStyle = 'red' सेट करके, शेष वाक्य लिखकर आप जो भी चाहते हैं वह कर सकते हैं।