एचटीएमएल 5 <canvas>

Question

पर fillText() के लिए रंग बदलना मैं कैनवास पर अपने संदेशों की प्रत्येक पंक्ति के लिए रंग बदलने की कोशिश कर रहा हूं, लेकिन अब तक कोई सफलता नहीं है। मैंने उनमें से प्रत्येक के लिए चर बनाने की कोशिश की है, लेकिन अभी भी कोई भाग्य नहीं है। किसी भी सहायता की सराहना की जाएगी।

function initiate(){ 
    var elem = document.getElementById("canvas"); 
    canvas = elem.getContext("2d"); 
    addEventListener("mousemove", animation); 

    canvas.shadowColor = "rgba(0, 0, 0, 0.5)"; 
    canvas.shadowOffsetX = 4; 
    canvas.shadowOffsetY = 4; 
    canvas.shadowBlur = 5; 

    canvas.font = "bold 24px verdana, sans-serif "; 
    var welcomeMessage ="Welcome to the store!"; 
    canvas.textAlign = "start"; 
    canvas.textBaseline = "bottom"; 
    canvas.fillText(welcomeMessage, 400, 50); 

    canvas.font = "bold 14px verdana, sans-serif"; 
    var message2 = "Your favorite store for videos games and latest DVDs!"; 
    canvas.textAlign = "start"; 
    canvas.textBaseline = "bottom"; 
    canvas.fillText(message2, 400, 100); 

    canvas.font = "bold 12px verdana, sans-serif"; 
    canvas.textAlign = "start"; 
    canvas.textBaseline = "bottom"; 
    // Create gradient 
    //var gradient=canvas.createLinearGradient(0,0,c.width,0); 
    //gradient.addColorStop("0","magenta"); 
    //gradient.addColorStop("0.5","blue"); 
    //gradient.addColorStop("1.0","red"); 
    //canvas.fillStyle = gradient; 
    canvas.fillText(" <-- Move your mouse aroud to interact with Macroplay smily!", 400, 250); 


} 

Answer 1

आपको टेक्स्ट के लिए रंग सेट करना होगा।

कुछ इस तरह:

canvas.font = "bold 24px verdana, sans-serif "; 
var welcomeMessage ="Welcome to the store!"; 
canvas.textAlign = "start"; 
canvas.textBaseline = "bottom"; 
canvas.fillStyle = "#ff0000"; //<======= here 
canvas.fillText(welcomeMessage, 400, 50); 

canvas.font = "bold 14px verdana, sans-serif"; 
var message2 = "Your favorite store for videos games and latest DVDs!"; 
canvas.textAlign = "start"; 
canvas.textBaseline = "bottom"; 
canvas.fillStyle = "#00ff00"; //<======= and here 
canvas.fillText(message2, 400, 100); 

इसके अलावा, यह एक अच्छा विचार है अपने संदर्भ चर "संदर्भ" या बजाय "कैनवास" के "CXT" नाम के लिए हो सकता है। यह कम भ्रामक होगा :)

Answer 2

आप की तरह साधारण fillStyles प्रयास किया है:

canvas.fillStyle = "#ff00ff"; 

<canvas> पर पाठ प्रतिपादन उन्नत भरने शैलियों का समर्थन नहीं कर सकते हैं।

प्रत्येक संदेश को प्रस्तुत करने से पहले बस नया fillStyle सेट करें।