Canvas绘制文字模糊问题：在线正常本地异常原因咨询

我之前踩过完全一样的坑！你遇到的问题核心在于Canvas元素的实际分辨率和CSS显示尺寸不匹配。

Canvas本质是一张像素画布：它的width和height属性决定了画布本身有多少像素（也就是绘图的原始分辨率），而CSS里设置的width/height只是把这张画布拉伸或压缩到浏览器里显示的大小。你现在只通过CSS给Canvas设置了936x435的显示尺寸，但没给Canvas元素设置对应的width和height属性，浏览器就会用默认的300x150像素分辨率来绘制，再拉伸到936x435，文字自然就糊成一团了。

快速解决当前问题 #

只需要给Canvas元素加上和CSS尺寸一致的width、height属性就行：

<canvas id="tree_canvas" class="tree_canvas_class" width="936" height="435"></canvas>

这样绘图的原始分辨率和显示尺寸一致，文字就能恢复清晰。

进阶：适配高DPI屏幕（视网膜屏） #

如果要让你的Canvas在手机、MacBook这类高分辨率屏幕上也保持清晰，还需要处理设备像素比的问题。修改你的TypeScript代码如下：

public DrawTheTree() {
    var canvas: HTMLCanvasElement = document.getElementById("tree_canvas") as HTMLCanvasElement;
    var context: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
    
    // 获取设备像素比，默认是1
    const dpr = window.devicePixelRatio || 1;
    // 获取Canvas的实际显示尺寸
    const rect = canvas.getBoundingClientRect();
    
    // 设置Canvas的实际分辨率为显示尺寸乘以设备像素比
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    
    // 缩放绘图上下文，让后续绘制的内容自动适配高DPI
    context.scale(dpr, dpr);
    
    // 原来的绘图代码完全不用改，坐标还是基于CSS显示尺寸
    context.beginPath();
    context.font = "16px Comic Sans MS";
    context.fillStyle = "white";
    context.textAlign = "center";
    context.fillText("Animals", 150, 15);
    context.closePath();
}

这个处理会让Canvas的实际像素数是显示尺寸的dpr倍，再通过缩放上下文，保证绘制的文字和图形在任何屏幕上都锐利清晰。

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