javascript和HTML中的动画

Animation in javascript and HTML

本文关键字：动画 HTML javascript      更新时间：2023-09-26

我正在尝试用javascript创建一个动画。

我创建了一个画布

<canvas id = "animation" width="1130" height="222"></canvas>

我想做的是添加3个图像(+1个是背景(，在每一秒中，我想显示1个图像，隐藏另外2个图像。我现在拥有的是：

var canvas = document.getElementById('animation');
context = canvas.getContext('2d');
background = new Image();
background.src = 'images/background.png';
background.onload = function(){
    context.drawImage(background, 0, 0);
}
var image1 = new Image();
image1.src = 'images/image1.png';
image1.onload = function(){
    context.drawImage(image1, 895, 61);
}
var image2 = new Image();
image2.src = 'images/image2.png';
image2.onload = function(){
    context.drawImage(image2, 895, 61);
}
var image3 = new Image();
image3.src = 'images/image3.png';
image3.onload = function(){
    context.drawImage(image3, 895, 61);
}
image1.style.visibility = "visible";
image2.style.visibility = "hidden";
image3.style.visibility = "hidden";
setTimeout(function(){
    image1.style.visibility = "hidden";
    image2.style.visibility = "visible";
    image3.style.visibility = "hidden";
}, 1000);
setTimeout(function(){
    image1.style.visibility = "hidden";
    image3.style.visibility = "visible";
    image2.style.visibility = "hidden";
}, 2000);
setTimeout(function(){
    image3.style.visibility = "hidden";
    image1.style.visibility = "visible";
    image2.style.visibility = "hidden";
}, 3000);

但是它不起作用。所有这些都显示在屏幕上

您试图在这里混合两种不同的东西：画布和CSS。

画布的工作原理就像(惊奇！(画布：这意味着一旦你在那里画了一些东西，它就会一直呆在那里，直到你在上面画了其他东西。因此，在内存中更改图像的css不会有任何影响。

您有两种选择：DOM路由，只需在没有画布的情况下将图像插入DOM中，就可以更改它们的样式；或者canvas路由，调用context.drawImage INSIDE各种setTimeout，这样您就可以每秒绘制一个新图像。

相关文章：