創建

Question

1號線新形象（）現在，我使用

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"); 
... 

注：我個人覺得快寫快看那個樣子，特別是因爲我有很多圖片。

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

不用修改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次完美，但如果你大量使用它，那麼簡單地做一個函數將會更好。

祝你好運^^