Question

我想在画布上显示图像（通常），然后重置。
drawImage（）是在加载源之后在画布上绘制图像的功能。

resetCanvas（）是用于重置/清理画布的功能。

var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");

drawImage("img/earth.jpg");
resetCanvas();
//more code

function resetCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawImage(source) {
    var img = new Image();
    img.onload = function() {
        var x = img.width;
        var y = img.height;
        adjustCanvasSize(x, y);
        ctx.drawImage(img,0,0, x, y);
    }
    img.src = source;
}

执行此代码时， resetCanvas（）被“忽略”。我不想在 drawImage（）的onload函数内插入 resetCanvas（），因为它实际上代表了将要执行的许多其他不同的函数和指令。在 drawImage（）之后，它看起来是错误的。

我在考虑是否有一种方法可以使javascript更具耐心性，并阻止它执行任何操作，直到将图像加载到drawImage函数中为止。

Answer 1

一些评论：

如果在绘制图像后重置画布，您将看不到图像，因为resetCanvas函数将删除您先前在画布上绘制的所有内容
使用画布中的图像时存在一些问题。请阅读这篇文章：MDM Using images

接下来是我的代码。希望对您有所帮助。

var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
resetCanvas();
drawImage("https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg");

//more code

function resetCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawImage(source) {
    var img = new Image();
    img.onload = function() {
        var x = img.width;
        var y = img.height;
        adjustCanvasSize(canvas,x, y);
        ctx.drawImage(img,0,0, x, y);
    }
    img.src = source;
}


function adjustCanvasSize(canvas, x, y){
  canvas.width = x;
  canvas.height = y;  
}

canvas{border:1px solid;}

<canvas id="Canvas"></canvas>

如何在另一个内部具有onload函数的函数执行？

1 个答案: