Question

现在，我正在使用

var lifeIcon = new Image();
lifeIcon.src = "img/System/lifeIcon.png";

有没有办法在一行中做同样的事情？

我试过

var lifeIcon = (new Image()).src = "img/System/lifeIcon.png";

但它不起作用。 lifeIcon被认为是一个字符串...

感谢。

注意：我有很多很多图片。我的目标是在画布中使用Image。例如：ctx.drawImage(lifeIcon,0,0)

解决方案：

function newImage(src){
    var tmp = new Image();
    tmp.src = src;
    return tmp
}

var lifeIcon = newImage("img/System/lifeIcon.png");
var closeIcon = newImage("img/System/closeIcon.png");
var goldIcon = newImage("img/System/goldIcon.png");
...

注意：我个人觉得写作速度更快，读取速度更快，特别是因为我有很多图片。

Answer 1

这取决于你接下来要做什么。如果您需要的唯一其他东西是追加它，那么您可以这样做：

element.appendChild(new Image()).src = "img/System/lifeIcon.png";

这是有效的，因为.appendChild()返回新添加的元素。

如果您需要指定其他属性，那么您可能只想创建一个辅助函数，该函数允许您传递包含属性和值的对象。

function create(name, props) {
    var elem = document.createElement(name);
    for (var p in props)
        elem[p] = props[p];
    return elem;
}

这是一个非常简单的功能，可以扩展一下，但你明白了。

var el = create("img", {src: "img/System/lifeIcon.png"});

Answer 2

好吧，不是var。如果它是全局的，你可以这样做：

(lifeIcon = new Image()).src = "img/System/lifeIcon.png"; // WARNING: VERY BAD

显然，这是一个坏主意，因为你总是希望将全局变量保持在最低限度。

实际上，将src分配到一行的整个想法无论如何都是个坏主意，因为它会使你的代码更难阅读。请记住，您将花费更多时间阅读代码而不是编写代码，因此请使用双线表单。你未来的自我会感谢你。

Answer 3

如果不修改图像功能或制作像这样的外部功能，很难做到。

function img(src) {
  var img = new Image(); img.src = src;
  var canvas = document.createElement("canvas");
  var returning = img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext("2d").drawImage(img, 0, 0);
    return canvas;
  }();
  return returning;
}

这将为您提供一个画布，可以在另一个画布上绘制它。

ctx.drawImage(img("background.jpg"), 0, 0);

或者只是

var image = img("background.jpg"); #will give you a canvas

您可以尝试one_lining的其他内容如下

var image = function() { var img = new Image(); img.src = "background.jpg"; return img; }();

在我看来，只有你称之为1或2次才能完美，但如果你大量使用它，那么简单地制作一个功能会更好。

祝你好运^^

在1行中创建一个新图像（）

3 个答案: