Canvas点击按钮修改文本颜色的实现问题咨询

你的代码问题在于：Canvas 是即时渲染模式，你只在页面初始化时绘制了红色文本，点击按钮时仅仅修改了 fillStyle，但没有重新绘制文本内容，所以画布上的文字颜色不会更新。

修复方案 #

需要把绘制文本的逻辑封装成可复用的函数，点击按钮修改颜色后，先清除画布（避免新旧文本叠加），再重新绘制文本。

修改后的完整代码如下：

JavaScript 代码

var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');

// 封装绘制文本的函数
function drawText() {
  context.font = '48px serif';
  context.fillText('Example text', 20, 65);
}

// 初始化绘制红色文本
context.fillStyle = 'red';
drawText();

function ChangeColor() {
  // 清除整个画布
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 修改颜色
  context.fillStyle = "blue";
  // 重新绘制文本
  drawText();
}

HTML 代码

<!doctype html>
<html>

<head>
  <style>
    #my-canvas {
      border: 1px solid gray;
    }
  </style>
</head>

<body>
  <canvas id="my-canvas" width="300" height="100"></canvas>
  <br>
  <button onClick="ChangeColor()">Change Font Color Blue</button>
</body>

</html>

关键说明 #

• clearRect(x, y, width, height)：清除画布指定区域的内容，这里用它清除整个画布，避免旧的红色文本和新的蓝色文本重叠。
• 封装 drawText 函数：避免重复编写绘制文本的代码，确保每次绘制的样式和位置一致。

内容的提问来源于stack exchange，提问作者Sumit patel