使用html2canvas生成的Canvas绘制矩形失败求助

AI 小北

2026-8-11

问题原因及解决方法

问题出在你设置的scale参数上：html2canvas生成的Canvas实际像素尺寸是目标元素的宽高乘以canvasScale，但Canvas的CSS显示尺寸是元素的原始尺寸。你直接绘制100x100的像素矩形，会被CSS缩放canvasScale倍，导致在页面上显示的尺寸远小于预期，看起来像是没有变化。

解决方法

方法1：按缩放比例调整绘制尺寸

将绘制的矩形宽高乘以canvasScale，确保在页面上显示为100x100的大小：

html2canvas(document.getElementById('example-element'), {backgroundColor: null, scale: canvasScale,}).then(function(canvas) {       
        document.body.appendChild(canvas);
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, 100 * canvasScale, 100 * canvasScale);
    });

方法2：缩放Canvas上下文坐标系

通过缩放上下文，让你可以直接按页面显示的坐标和尺寸绘制：

html2canvas(document.getElementById('example-element'), {backgroundColor: null, scale: canvasScale,}).then(function(canvas) {       
        document.body.appendChild(canvas);
        let ctx = canvas.getContext('2d');
        // 匹配scale参数缩放坐标系
        ctx.scale(canvasScale, canvasScale);
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, 100, 100);
    });