HTML Canvas设置ctx.font仅改图片宽度，字体大小未生效求助

当修改canvas的width或height属性时，Canvas的绘图上下文会被完全重置——所有之前设置的font、fillStyle等属性都会恢复到默认值。你当前的代码逻辑存在以下问题：

1. 先设置ctx.font = "30px Arial"并计算文本宽度
2. 修改canvas.width和canvas.height，此时上下文被重置，font变回默认值
3. 直接调用fillText时用的是默认字体大小，所以字体没变化，但计算宽度时用的是30px的宽度，导致canvas被不必要地拉宽

把ctx.font的设置代码放在修改canvas尺寸之后、绘制文本之前，确保绘制时使用的是你指定的字体大小。同时修正几个小问题：

• Math.max(quoteWidth)完全多余，直接用quoteWidth + 20即可
• 下载文件名拼写错误：qoute.png → quote.png

修复后的downloadImage函数代码：

function downloadImage() {
  // 获取HTML元素中的引用和名称
  var quote = document.getElementById("zitat").innerText;
  var name = document.getElementById("Name").innerText;

  // 创建canvas元素
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");

  // 先计算文本宽度（临时设置字体）
  ctx.font = "30px Arial";
  var quoteWidth = ctx.measureText(quote).width;
  var nameWithPrefixWidth = ctx.measureText("- " + name).width;
  var titleWidth = ctx.measureText("Zitat Shuffle").width;

  // 设置canvas尺寸
  canvas.width = Math.max(quoteWidth, nameWithPrefixWidth, titleWidth) + 40;
  canvas.height = 100;

  // 重置上下文后，重新设置字体和样式
  ctx.font = "30px Arial";
  ctx.fillStyle = "#ff9329";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#000";
  
  // 绘制文本（修正居中逻辑）
  ctx.fillText("Zitat Shuffle", canvas.width / 2 - titleWidth / 2, 30);
  ctx.fillText(quote, 20, 60);
  ctx.fillText("- " + name, canvas.width / 2 - nameWithPrefixWidth / 2, 90);

  // 转换为图片链接
  var dataURL = canvas.toDataURL("image/png");

  // 创建下载链接并触发下载
  var link = document.createElement("a");
  link.download = "quote.png";
  link.href = dataURL;
  link.click();

  // 移除canvas元素
  canvas.remove();
}

• 原代码中绘制"Zitat Shuffle"时用nameWidth计算居中是错误的，已修正为单独计算标题宽度
• 固定canvas.height = 80可能会在字体变大时导致文本截断，建议根据字体大小动态调整高度

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