Javascript Canvas setTransform（）用于剪切图像

我正在制作一个数字绘制工具，它使用

setTransform（）

函数扭曲/扭曲用户绘制的给定数字并下载它们。目前，在画布上绘制新图像之前，图像似乎尚未从帧中清除

以下是我的意思的一个例子：

目标：

以下是与操作图像和下载图像相关的代码：

function save(number) {
    for(let i = -0.2; i <= 0.2; i += 0.05) {
        for(let j = -0.2; j <= 0.2; j += 0.05) {
            for(let k = 0.9; k <= 1.05; k += 0.05){
                for(let l = 0.9; l <= 1.05; l += 0.05){
                    temp2canvas.getContext('2d').setTransform(k, i, j, l, 0, 0);

                    temp2canvas.getContext('2d').clearRect(0, 0, temp2canvas.width, temp2canvas.height);
                    tempcanvas.getContext('2d').clearRect(0, 0, tempcanvas.width, tempcanvas.height);

                    document.getElementById("canvasimg").style.border = "2px solid";

                    temp2canvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height, 10, 10, 102, 102);
                    tempcanvas.getContext('2d').drawImage(temp2canvas, 0, 0, temp2canvas.width, temp2canvas.height, 0, 0, 28, 28);

                    var dataURL = tempcanvas.toDataURL();
                    document.getElementById("canvasimg").src = dataURL;
                    zip.file(number + "\\" + count + ".png", document.getElementById("canvasimg").src.replace(/^data:image\/(png|jpg);base64,/, ""), {base64: true});
                    count++;
                }
            }
        }
    }
}

function done() {
    zip.generateAsync({type:"blob"})
    .then(function(blob) {
        saveAs(blob, "data.zip");
    });
}

功能保存（编号）{
对于（设i=-0.2；i调用
clearRect（）
时，变换仍处于活动状态，因此清除矩形本身被变换，可能不会覆盖画布的整个区域

在清除画布之前，只需将转换矩阵重置为标识矩阵：


功能保存（编号）{
const ctx=temp2canvas.getContext（'2d'）；
ctx.font=“20px无衬线”；
对于（设i=-0.2；i