Thay đổi màu cho fillText() trên HTML5 <canvas>

Question

Tôi đang cố gắng thay đổi màu cho mỗi dòng thư của tôi trên canvas, nhưng không thành công cho đến thời điểm này. Tôi đã thử tạo biến cho mỗi người trong số họ, nhưng vẫn không có may mắn. Bất kỳ trợ giúp sẽ được đánh giá cao.

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

bạn phải đặt màu cho văn bản.

Something như thế này:

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); 

Ngoài ra, nó có thể là một ý tưởng tốt để đặt tên biến bối cảnh của bạn "bối cảnh" hoặc "cxt" thay vì "vải". Nó sẽ là ít gây nhầm lẫn :)

Answer 2

Các bạn đã thử fillStyles đơn giản như:

canvas.fillStyle = "#ff00ff"; 

Hình dựng văn bản trên <canvas> thể không hỗ trợ kiểu fill tiên tiến.

Chỉ cần điền fillStyle mới trước khi hiển thị từng thư.