2

现在，我正在使用

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

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

我试过

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

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

谢谢。

注意：我有很多很多图像。我的目标是在画布中使用图像。前任：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");
...

注意：我个人觉得这样写起来更快，读起来也更快，尤其是因为我有很多图像。

4

3 回答 3

4

这有点取决于你接下来要做什么。如果您唯一需要的另一件事是附加它，那么您可以这样做：

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"});
于 2013-08-31T21:23:06.510 回答
1

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

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

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

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

于 2013-08-31T21:25:14.477 回答
0

如果不修改 Image 函数或制作这样的外部函数，就很难做到。

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 次时，一个衬里才是完美的，但如果你大量使用它，那么简单地制作一个函数会做得更好。

祝你好运^^

于 2016-10-21T21:55:53.720 回答