在 html2canvas 生成的画布上绘制

【问题标题】：Draw on canvas generated by html2canvas在 html2canvas 生成的画布上绘制
【发布时间】：2022-12-23 19:59:02
【问题描述】：

我需要将 html2canvas 的画布用作普通画布并在其上绘制一个矩形，但我似乎无法让它工作。这是代码：

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, 100);
    });

我期待出现一个填充的矩形，但画布上没有任何反应。

【问题讨论】：

标签： javascript html jquery html2canvas

【解决方案1】：

它可能正在工作，但由于从 html2canvas 设置的修改后的掩码/转换，您的绘图是画布外的或开始被剪裁。

重置上下文的转换可能会修复它：

html2canvas(document.getElementById('example-element'), {backgroundColor: null, scale: canvasScale,}).then(function(canvas) {       
        document.body.appendChild(canvas);
        let ctx = canvas.getContext('2d');
        ctx.resetTransform(); // <---- this line is what you need
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, 100, 100);
    });

【讨论】：