Question

我似乎无法找到如何将图像添加到Javascript。我正在创建一个动画，我想做的就是在动画开始时我要添加4个数字，从4个时间倒数到音乐。

我打算让每个号码飞离页面每个角落的一侧以指示倒计时，但我似乎无法插入任何图像。

我尝试过使用我在网上找到的代码，但似乎没有任何效果。

有人可以帮我提供将图像放入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，我显然需要将“导入的位图图像”添加到我的动画中。

Answer 1

所以我猜你有某种HTML文件可以加载你的javascript。要获得图像，您需要：

创建<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

Answer 2

在DOM上创建和添加图像非常简单。

创建图像对象并将其添加到DOM：

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

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

live jsfiddle：http://jsfiddle.net/tornado1979/p3h67n1u/

希望有所帮助，祝你好运。

如何将图像添加到javascript

2 个答案: