javascript - Canvas 的颜色和重叠问题

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

Canvas 上下文使用整个状态来绘制事物，并且它们是按照您调用它们的顺序绘制的。想要将文本放在矩形之上吗？先画出矩形。想改变颜色吗？将颜色设置为绿色，绘制矩形，将颜色设置为红色，绘制文本。

它没有原生的方式来表示“矩形是绿色的”。它更多的是“你绘制的下一个东西将具有绿色的填充样式，我想我会绘制一个矩形”，所以你有一个绿色的矩形。