如何添加图像到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

回答

相关问题