如何为Canvas元素设置背景色并实现带图片背景的居中文字效果

嘿，这个问题我之前也踩过坑！用CSS给Canvas加背景的话，确实会出现右键保存时背景丢失的情况——因为CSS样式是属于DOM元素的渲染层，并没有真正画到Canvas的像素内容里。要让背景能跟着图片一起保存，得用Canvas的绘图API直接把背景画上去才行。

解决方案步骤 #

1. 先绘制Canvas黑色背景：在绘制文字之前，用fillRect方法填充整个Canvas区域为黑色，这样背景就成为Canvas像素内容的一部分了。
2. 保留图片填充文字的逻辑：原来的图片填充文字代码不用改，但要注意顺序——先画背景，再画文字，不然文字会被背景盖住。
3. 可选：让文字完全居中：如果想让文字像你示意的那样在Canvas中央，可以通过计算调整文字的坐标，让它水平和垂直都居中。

修改后的完整代码 #

JavaScript（核心修改部分）

const init = () => {
  const canvas = document.getElementById("canvas")
  const context = canvas.getContext('2d')
  context.font = 'bold 140px Times'
  context.textBaseline = 'center'
  
  const image = new Image()
  image.src = 'https://img.redbull.com/images/c_crop,x_0,y_0,h_1080,w_1620/c_fill,w_1500,h_1000/q_auto,f_auto/redbullcom/2017/08/29/03820845-b090-444f-86d1-e5259d11482f/most-heroic-pokemon.jpg.jpg'
  
  image.onload = () => {
    // 第一步：绘制黑色背景，覆盖整个Canvas
    context.fillStyle = '#000'
    context.fillRect(0, 0, canvas.width, canvas.height)
    
    // 第二步：图片填充文字的原有逻辑
    const pattern = context.createPattern(image, null)
    context.fillStyle = pattern
    
    // 可选：计算文字居中的坐标
    const text = 'Lorem ipsum'
    const textWidth = context.measureText(text).width
    const x = (canvas.width - textWidth) / 2
    const y = canvas.height / 2
    
    context.fillText(text, x, y)
  }
}
init()

CSS（无修改，保留边框方便调试）

canvas {
  border: 1px solid #000;
}

HTML（无修改）

<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1920" height="1080"></canvas>
</body>
</html>

为什么这样可行？ #

• fillRect是直接在Canvas的绘图上下文里绘制像素，所以保存图片时，背景色会和文字一起被包含进去，不会像CSS背景那样丢失。
• 调整文字坐标的部分，用measureText获取文字宽度，再结合Canvas的宽高计算居中位置，能让文字完美显示在画布中央，符合你给出的效果示意。

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