Как выполнить функцию после другой, в которой есть функция onload? - PullRequest
Новая
       57

Как выполнить функцию после другой, в которой есть функция onload?

0 голосов
/ 03 сентября 2018
  • Я хочу отобразить изображение (динамически) на холсте, а затем сбросить его.
  • 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 () игнорируется. Я не хочу вставлять resetCanvas () в функцию onload функции drawImage () , так как на самом деле она представляет множество других различных функций и инструкций, которые будут выполняться после drawImage () и это будет выглядеть неправильно.

Я думал, есть ли способ сделать javascript более терпеливым и остановить его от выполнения чего-либо, пока изображение не загрузится в функцию drawImage.

1 Ответ

0 голосов
/ 03 сентября 2018

Несколько комментариев:

  1. Если вы сбросите холст после рисования изображения, вы не увидите его, так как функция resetCanvas удаляет все, что вы ранее рисовали на холсте

  2. При работе с изображениями на холсте возникают некоторые проблемы. Пожалуйста, прочитайте эту статью: MDM Использование изображений

Дальше мой код. Надеюсь, это поможет. 

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>
...