javascript - 如何通过 javascript 在 HTML5 Canvas 中应用图像的宽度

Question

这是我的脚本:

var img = new Image();
img.onload = function() {
    resourceCache[url] = img;
    readyCallbacks.forEach(function(func) {
         func();
    }
};

此脚本将图像绑定(bind)到 Canvas 中。我想知道如何设置图像的宽度。我无法理解 readyCallbacks.forEach(function(func) { func(); }

的含义

完整代码:

(function() {
var resourceCache = {};
var loading = [];
var readyCallbacks = [];

// Load an image url or an array of image urls
function load(urlOrArr) {
    if(urlOrArr instanceof Array) {
        urlOrArr.forEach(function(url) {
            _load(url);
        });
    }
    else {
        _load(urlOrArr);
    }
}

function _load(url) {
    if(resourceCache[url]) {
        return resourceCache[url];
    }
    else {
        var img = new Image();
        img.onload = function() {
            //img["width"] = "101";
            resourceCache[url] = img;

            if(isReady()) {
                readyCallbacks.forEach(function(func) {
                    func();
                });
            }
        };
        resourceCache[url] = false;
        img.src = url;
    }
}

function get(url) {
    return resourceCache[url];
}

function isReady() {
    var ready = true;
    for(var k in resourceCache) {
        if(resourceCache.hasOwnProperty(k) &&
           !resourceCache[k]) {
            ready = false;
        }
    }
    return ready;
}

function onReady(func) {
    readyCallbacks.push(func);
}

window.resources = { 
    load: load,
    get: get,
    onReady: onReady,
    isReady: isReady
};
})();

Answer 1

jsFiddle:https://jsfiddle.net/evq6ac0e/2/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image();

//img.src = URL here;

img.onload = function() {
  ctx.fillStyle = "#000";
  ctx.fillRect(0,0,c.width,c.height);
  c.width = img.width;
  c.height = img.height;
  ctx.drawImage(img,0,0);
};

只需定位 Canvas 并设置图像的宽度和高度，如果您只想设置宽度，则删除行 c.height = img.height; ，反之亦然

第 2 部分

就解释 readyCallbacks.forEach(function(func) { func(); } 的作用而言:它只是迭代函数数组并调用数组中的每个函数。回调函数获取每次调用 onReady(func) 时都会添加到 readyCallbacks。

所有这一切的结果是代码在调用通过 onRead(func) 注册的所有函数之前等待所有图像加载

jsFiddle(已添加注释):https://jsfiddle.net/CanvasCode/arkjge2o/

(function() {
  var resourceCache = {};
  var loading = [];
  var readyCallbacks = [];

  // Load an image url or an array of image urls
  function load(urlOrArr) {
    if (urlOrArr instanceof Array) {
      urlOrArr.forEach(function(url) {
        _load(url);
      });
    } else {
      _load(urlOrArr);
    }
  }

  function _load(url) {
    if (resourceCache[url]) {
      return resourceCache[url];
    } else {

      // Create a new img variable
      var img = new Image();
      img.onload = function() {
        // Store the new image object
        resourceCache[url] = img;

        // Check to see if all images are loaded
        if (isReady()) {
          // Calls all the callbacks in the array
          readyCallbacks.forEach(function(func) {
            func();
          });
        }
      };

      resourceCache[url] = false;

      // Start the image loading
      img.src = url;
    }
  }

  function get(url) {
    return resourceCache[url];
  }

  function isReady() {
    var ready = true;
    // For each image inside of resourceCache
    for (var k in resourceCache) {
    // See if any of the images is not an image
    // resourceCache.hasOwnProperty(k) will always return true
      if (/*resourceCache.hasOwnProperty(k) &&*/
        !resourceCache[k]) {
        ready = false;
      }
    }
    return ready;
  }

  function onReady(func) {
    readyCallbacks.push(func);
  }

  window.resources = {
    load: load,
    get: get,
    onReady: onReady,
    isReady: isReady
  };
})();