如何添加圖像到javascript

我似乎無法找到如何添加圖像到Javascript。我目前正在創建一個動畫，我想要做的就是在動畫的開始處，我將添加4個數字，從4個數字到數字，然後逐漸減少到音樂。如何添加圖像到javascript

我打算讓每個數字都離開頁面每個角落的邊緣以指示倒計時，但我似乎無法插入任何圖像。

我試過使用我在網上找到的代碼，但似乎沒有任何工作。

有人可以幫助給我確切的代碼，我需要將圖像放入我的Javascript？

我的代碼看起來像這樣。

window.onload= function(){ 

var paper = new Raphael(0, 0, 800, 600); 

var backGround = paper.rect(0,0,800,600); 

backGround.attr({ fill: "black"}); 

/* Comment - Add your code here*/ 

var ball = paper.circle(40,270,10); 
var paddleleft = paper.rect(10, 230, 15, 100); 
var paddleright = paper.rect(775, 230, 15, 100); 
var line = paper.rect(400, 0, 5, 600); 

ball.attr({ fill: "white"}); 
paddleleft.attr({ fill: "white"}); 
paddleright.attr({ fill: "white"}); 
line.attr({ fill: "white"}); 

function bounce_drop1() { 

ball.animate({cy: 50 , cx: 750}, 500, 'ease-in', bounce_up1); 

} 
function bounce_up1() { 

ball.animate({cy: 50, cx: 750}, 500, 'ease-out', bounce_drop2); 
} 

bounce_drop1(); 

function bounce_drop2() { 

ball.animate({cy: 570 , cx: 400}, 500, 'ease-in', bounce_up2); 

} 
function bounce_up2() { 

ball.animate({cy: 50, cx: 50}, 500, 'ease-out', bounce_drop1); 
} 

};

我不確定把圖片放在哪裏，但是在下面的帖子後面我試過這個。

var imgSrc = "http://www.pnglogo.com/wp-content/uploads/2015/10/4-Number-Clipart-PNG-02202.png"; 
var img = new Image(); 
img.src = imgSrc; 

document.getElementById('mygallery').appendChild(img);

但它沒有做任何事情，我的意思是說圖像是一個變量？

對不起，我是新來使用Javascript和我顯然需要「導入位圖圖像」到我的動畫。

來源

2015-12-02 Stusbu

什麼是「將圖像轉換爲JavaScript」？ – CoderPi

你必須提供更多信息。JavaScript本身與圖像沒有任何關係，所以目前還不清楚「如何將圖像添加到Javascript」的含義。你也可以問「如何添加一頭大象到JavaScript」。 –

http://stackoverflow.com/help/how-to-ask – Blazemonger

在DOM上創建和添加圖像非常簡單。

創建圖像對象並將其添加到DOM：

var imgSrc = "http://fabricjs.com//assets/pug_small.jpg"; 
var img = new Image(); 
img.src = imgSrc; 

document.getElementById('mygallery').appendChild(img);

現場的jsfiddle：http://jsfiddle.net/tornado1979/p3h67n1u/

希望有所幫助，祝你好運。

來源

2015-12-02 20:16:09

我必須把任何代碼顯示在動畫中的圖像？我複製了你的代碼，並用自己的圖片替換了imgSrc，但是當我刷新頁面時，我沒有看到任何圖像。我是否應該添加另一個顯示圖像的變量以及大小？ – Stusbu

1.你用你的圖片網址創建變量。 2.你創建圖像對象。 3.你在DOM上展示他們。這些是步驟。在jsfiddle上，我展示了這個功能。如果你想添加動畫到你的代碼中，你需要css轉換，這是不符合你的問題的。但最好在jsfiddle上用你的代碼創建一個url，以便更仔細地檢查它。 –

所以我猜你有一些加載你的JavaScript的HTML文件。爲了得到一個圖像到，你將需要：

創建類型的新HTML節點<img />
這個節點將需要src屬性來定義該圖像是來自（也許從本地文件系統或者託管在網絡的任何地方）。
創建HTML節點後，您需要將其附加到已經存在的DOM節點上以實際「顯示」。
當這一切都完成後，你應該有你的圖像節點，並可以動畫/操縱它們，無論你想要如何，用CSS或JavaScript

代碼可能是這個樣子：

var img = document.createElement('img); 
img.src = 'http://somelinktoanimage'; 

var parentNode = document.getElementById('parentNodeId'); 
parentNode.appendChild(img);

這是一個非常基本的例子，並給我可不是真的知道你的信息是否適用於您的使用案例。

此外，我建議你閱讀了一些基本的東西：

Web technology for developers MDN

來源

2015-12-02 20:16:48 Scarysize

如何添加圖像到javascript

回答

相關問題