颜色和用帆布

Question

重叠的问题，这是我的HTML

<canvas class="row" id="myCanvas" width="500" height="50" style="border:1px solid #c3c3c3;" ></canvas> 

，这是JavaScript的

function showProgress() { 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.clearRect(0, 0, c.width, c.height); 
     ctx.fillText("welcome", c.width/2, c.height/2); 
     ctx.textAlign = "center"; 
     ctx.font = "30px Arial"; 
     ctx.fillStyle = "#00ff00"; 
      ctx.fillRect(0, 0, 270, 75); 
    } 
    showProgress(); 

我有以下两个问题。 1.绿色填充矩形隐藏文字。如何在填充颜色上显示文本。
2.我希望文字（在这种情况下欢迎）颜色为红色。无论如何修改文本颜色。

代码可以在的jsfiddle https://jsfiddle.net/Lp24q01s/

Answer 1

function showProgress() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.clearRect(0, 0, c.width, c.height); 

    ctx.fillStyle = "#00ff00"; 
    ctx.fillRect(0, 0, 270, 75); 

    ctx.fillStyle = '#ff0000'; 
    ctx.textAlign = "center"; 
    ctx.font = "30px Arial"; 
    ctx.fillText("welcome", c.width/2, c.height/2); 
} 
showProgress(); 

画布上下文使用整个状态画的东西被发现和他们在你给他们打电话的顺序绘制。想要矩形顶部的文字？首先绘制矩形。想改变颜色？将颜色设置为绿色，绘制矩形，将颜色设置为红色，绘制文本。

它没有一种原生的方式来说“矩形是绿色的”。更“接下来的事情会有绿色的填充风格，我想我会画一个矩形”，所以你有一个绿色的矩形。

Answer 2

function showProgress() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.fillStyle = "#00ff00"; 
    ctx.fillRect(0, 0, 270, 75); 
    ctx.fillStyle = "#ff0000";// red text 
    ctx.fillText("welcome", c.width/2, c.height/2); 
    ctx.textAlign = "center"; 
    ctx.font = "30px Arial"; 
} 
showProgress(); 

你应该把fillText的fillRect后，还需要设置fillStyle
因为画布只是一个Finite State Machine，它可以不记得你做了什么。
如果你做了一些不同的状态（如更改fillStyle），并做另一个渲染（如fillRect），当前结果将始终覆盖您之前完成的结果。