изображение не отображается в холсте. Каждый раз я обновляю страницу `с помощью очистки кеша браузера [дубликат]

Question

изображение не отображается в холсте. Каждый раз я обновляю страницу `с помощью очистки кеша браузера [дубликат]

В то время как обещания и обратные вызовы хорошо работают во многих ситуациях, боль в задней части выражает нечто вроде:

if (!name) {
  name = async1();
}
async2(name);

. В итоге вы пройдете через async1; проверьте, не определено ли name или нет, и соответственно вызовите обратный вызов.

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

Хотя в в порядке хорошо , это раздражает, когда у вас много подобных случаев и обработка ошибок.

Fibers помогает в решении проблемы.

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

Вы можете проверить проект здесь .

2

javascript canvas html5-canvas

задан epistemex 4 April 2015 в 23:30

1 ответ

Другие вопросы по тегам:

javascript canvas html5-canvas

Похожие вопросы:

score 5 · Accepted Answer

Это потому, что загрузка изображений является асинхронной. Вызов предупреждения помогает браузеру подождать немного, чтобы загрузка изображения могла завершиться. Поэтому изображение будет доступно в drawImage, которое следует далее.

Правильный способ реализовать это - использовать код таким образом:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image(); //document.createElement('img'); for Chrome due to issue

// add a onload handler that gets called when image is ready
image.onload = function () {
    context.drawImage(this, 0, 0, 300, 400);
}

// set source last so onload gets properly initialized
image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG';

Операция рисования внутри обратного вызова для onload так же легко мог быть вызов функции:

image.onload = nextStep;
// ...

function nextStep() {
    /// draw image and other things...
}