如何提升HTML5 Canvas分辨率？绘制矩形模糊问题求助

嘿，我完全懂你遇到的这个Canvas模糊问题——这在高分辨率（比如Retina）屏幕上太常见了，核心原因是**设备像素比（DPR）**的差异：你的Canvas用的是CSS像素来定义尺寸，但高DPI屏幕的实际物理像素是CSS像素的2倍（甚至更多），导致绘制的图形被拉伸，看起来就模糊了。下面是一步步的修复方案：

核心修复思路 #

我们需要让Canvas的内部像素尺寸匹配屏幕的实际物理像素，同时保持它的显示大小不变，再通过缩放绘图上下文来适配这个差异。

修改后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Resize</title>
    <style>
        canvas {
            border: 1px solid black;
            /* 固定Canvas的显示尺寸 */
            width: 1280px;
            height: 739px;
        }
        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <!-- 移除width和height属性，由JS根据DPR设置实际像素尺寸 -->
    <canvas id="sig-canvas"></canvas>
    <p id="timer"></p>
    <script src="canvas.js"></script>
</body>
</html>

JavaScript部分 #

var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;

// 处理高DPI屏幕的分辨率适配
const DPR = window.devicePixelRatio || 1;
const canvasRect = canvas.getBoundingClientRect();
// 设置Canvas的实际像素尺寸为显示尺寸 × 设备像素比
canvas.width = canvasRect.width * DPR;
canvas.height = canvasRect.height * DPR;
// 缩放绘图上下文，让绘制操作自动适配高DPI
ctx.scale(DPR, DPR);

canvas.addEventListener("mousemove", function (e) {
    mousePos = getMousePos(canvas, e);
    drawing = true;
}, false);

// 获取鼠标相对于Canvas的位置（CSS像素，已适配缩放）
function getMousePos(canvasDom, mouseEvent) {
    var rect = canvasDom.getBoundingClientRect();
    return {
        x: mouseEvent.clientX - rect.left,
        y: mouseEvent.clientY - rect.top
    };
}

// 修复requestAnimFrame的拼写错误（原代码里ms前缀的方法少了个n）
window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000/60);
        };
})();

// 绘制到Canvas
function renderCanvas() {
    if (drawing) {
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(mousePos.x, mousePos.y, 25, 25);
        ctx.strokeStyle = "#000000";
        ctx.lineWidth = 2;
        ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
        lastPos = mousePos;
    }
}

// 动画循环
(function drawLoop () {
    requestAnimFrame(drawLoop);
    renderCanvas();
})();

关键修改点说明 #

• 设备像素比适配：通过window.devicePixelRatio获取屏幕的实际像素密度，把Canvas的内部像素尺寸放大对应倍数，确保有足够的像素来绘制清晰的图形。
• 上下文缩放：ctx.scale(DPR, DPR)让所有的绘制操作（比如fillRect、strokeRect）自动适配高DPI，你不用手动修改每个坐标或尺寸的数值。
• 修复拼写错误：原代码里的msRequestAnimaitonFrame多了个拼写错误（少了字母n），这会导致IE浏览器无法正常触发动画，现在已经修正。

这样修改后，你绘制的矩形在高分辨率屏幕上就会清晰锐利了！

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