如何添加图像到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和我显然需要“导入位图图像”到我的动画。
在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/
希望有所帮助,祝你好运。
我必须把任何代码显示在动画中的图像?我复制了你的代码,并用自己的图片替换了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);
这是一个非常基本的例子,并给我可不是真的知道你的信息是否适用于您的使用案例。
此外,我建议你阅读了一些基本的东西:
什么是“将图像转换为JavaScript”? – CoderPi
你必须提供更多信息。JavaScript本身与图像没有任何关系,所以目前还不清楚“如何将图像添加到Javascript”的含义。你也可以问“如何添加一头大象到JavaScript”。 –
http://*.com/help/how-to-ask – Blazemonger