Fatal编程技术网
  • javascript/
  • Javascript 在HTML5画布中简单加载动画

Javascript 在HTML5画布中简单加载动画

javascript html5-canvas

Javascript 在HTML5画布中简单加载动画,javascript,html5-canvas,Javascript,Html5 Canvas,我正在寻找一个简单的图像加载动画。我想找到一个简短而简单的解决方案，只使用画布上的绘图和纯Javascript 请帮助我将使用由在线工具（如或）生成的加载GIF，并将其放置在一个div标记中，您可以在canvas元素前面切换该标记 有关微调器生成器脚本的更多信息，请参见 希望这有帮助 如果您正在使用html5画布搜索一个简单的加载动画，那么它就在这里。。 #d1，#ci1，#ci2，#ci3{位置：绝对；顶部：0px；左侧：0px} .cc2{-webkit动画持续时间：1s；-webkit

我正在寻找一个简单的图像加载动画。我想找到一个简短而简单的解决方案，只使用画布上的绘图和纯Javascript

请帮助

我将使用由在线工具（如或）生成的加载GIF，并将其放置在一个div标记中，您可以在canvas元素前面切换该标记

有关微调器生成器脚本的更多信息，请参见

希望这有帮助

如果您正在使用html5画布搜索一个简单的加载动画，那么它就在这里。。 


#d1，#ci1，#ci2，#ci3{位置：绝对；顶部：0px；左侧：0px}
.cc2{-webkit动画持续时间：1s；-webkit动画名称：loading2w；-webkit动画迭代次数：无限；-moz动画持续时间：1s；-moz动画名称：loading2m；-moz动画迭代次数：无限；-o-animation-duration:1s；-o-animation-name:loading2o；-o-animation-iteration-count:infinite；}
.cc3{-webkit动画持续时间：1s；-webkit动画名称：loading3w；-webkit动画迭代次数：无限；-moz动画持续时间：1s；-moz动画名称：loading3m；-moz动画迭代次数：无限；-o-animation-duration:1s；-o-animation-name:loading3o；-o-animation-iteration-count:infinite；}
@-webkit关键帧加载2W{
0%{可见性：隐藏；}
33%{可见性：隐藏；}
33.33%{可见性：可见；}
100%{可见性：隐藏；}
}
@-moz关键帧加载2M{
0%{可见性：隐藏；}
33%{可见性：隐藏；}
33.33%{可见性：可见；}
100%{可见性：隐藏；}
}
@-o-关键帧加载2o{
0%{可见性：隐藏；}
33%{可见性：隐藏；}
33.33%{可见性：可见；}
100%{可见性：隐藏；}
}
@-webkit关键帧加载3W
{
0%{可见性：隐藏；}
66.33%{可见性：隐藏；}
66.67%{可见性：可见；}
100%{可见性：隐藏；}
}
@-moz关键帧加载3M
{
0%{可见性：隐藏；}
66.33%{可见性：隐藏；}
66.67%{可见性：可见；}
100%{可见性：隐藏；}
}
@-o-关键帧加载3O
{
0%{可见性：隐藏；}
66.33%{可见性：隐藏；}
66.67%{可见性：可见；}
100%{可见性：隐藏；}
}
window.addEventListener（“加载”，win\u加载，false）；
函数win_load（）
{                
变量c10=document.getElementById（“ci1”）；变量ctx10=c10.getContext（“2d”）；ctx10.fillStyle=“#f00”；ctx10.font=“15pt Calibri”；ctx10.fillText（“加载”），5,15；
变量c10=document.getElementById（“ci2”）；变量ctx10=c10.getContext（“2d”）；ctx10.fillStyle=“#f00”；ctx10.font=“15pt Calibri”；ctx10.fillText（.”，5,15）；
变量c10=document.getElementById（“ci3”）；变量ctx10=c10.getContext（“2d”）；ctx10.fillStyle=“#f00”；ctx10.font=“15pt Calibri”；ctx10.fillText（.”，5,15）；
}

这是一个仅使用javascript和画布的动画-它是使用应用程序创建的，其帮助文件如下所示

然而，由于它不使用图像，也不简单，它可能不是您想要的

我唯一能想到的另一种方法是使用with加载一系列图像

或者只需在画布中使用gif图像，如下面的代码所示

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript">
            function main() {
               img=document.getElementById("anigif");
               Ani=$("ani");
               Ani.width=500;
               Ani.height400;
               Ani.ctx=Ani.getContext('2d');
               Ani.ctx.drawImage(img,0,0)
            }
        </script>
    </head>
    <body onload="main()">
        <img id="anigif" src="http://www.mathworks.com/matlabcentral/fx_files/21944/2/DancingPeaks.gif">
        <canvas id="ani"></canvas>
    </body>
</html>


函数main（）{
img=document.getElementById（“anigif”）；
Ani=$（“Ani”）；
Ani.宽度=500；
Ani.身高400；
Ani.ctx=Ani.getContext（'2d'）；
Ani.ctx.drawImage（图像，0,0）
}
试试这个。。 


#layer6、#layer7、#layer8{位置：绝对；左侧：0px；顶部：0px；}
.anim_8{-webkit动画持续时间：1.5s；-webkit动画迭代次数：无限；-webkit变换原点：25px 25px；-webkit动画名称：动画_6；-webkit动画计时函数：线性；
-moz动画计时功能：线性；-moz动画持续时间：1.5s；-moz动画名称：动画_6；-moz变换原点：25px 25px；-moz动画迭代次数：无限；
-o-animation-timening-function:linear；-o-animation-duration:1.5s；-o-animation-name:animation_6；-o-transform-origin:25px 25px；-o-animation-iteration-count:infinite；}
@-webkit关键帧动画_6{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@-o-关键帧动画_6{
0%{-o变换：旋转（0度）；}
100%{-o变换：旋转（360度）；}
}
@-moz关键帧动画_6{
0%{moz变换：旋转（0度）；}
100%{moz变换：旋转（360度）；}
}       
window.addEventListener（“加载”，绘制画布，false）；
函数draw_canvas（）
{
var c6=document.getElementById（“layer6”）；var ctx6=c6.getContext（“2d”）；ctx6.fillStyle=“#FF000
本文：帮助我绘制自己的动画。

这是我的加载，使用画布绘制了两个圆圈

 drawProgressIndicator: function(){

    var can = this.imgCanvas;
    var ctx = this.imgCtx;

    ctx.save();
    ctx.clearRect(0, 0, can.width, can.height);
    ctx.translate(can.width / 2, can.height / 2);
    ctx.scale(0.4, 0.4);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    var step = this.animationStep;
    ctx.fillStyle = "black";
    ctx.save();
    ctx.rotate(step * Math.PI / 30);
    ctx.strokeStyle = "#33ccff";
    ctx.fillStyle = "#33ccff";
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(68, 0);
    ctx.stroke();
    ctx.fill();
    ctx.restore();
    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = 'gray';
    ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.restore();
    this.animationStep += 1;
},

var canvas=document.createElement（“canvas”）；
画布宽度=200；
画布高度=200；
canvas.style.backgroundColor=“黑色”；
document.body.appendChild（画布）；
var ctx=canvas.getContext（“2d”）；
var bigCircle={
中心：{
x:100，
y:100
},
半径：50，
速度：4
}
var smallCirlce={
中心：{
x:100，
y:100
},
半径：30，
速度：2
}
var进程=0；
函数加载（）{
clearRect（0，0，canvas.width，canvas.height）；
进度+=0.01；
如果（进度>1）{
进度=0；
}
drawCircle（bigCircle，progress）；
画圈（小圈，进度）；
请求阿尼玛

<html>
<head>
<style type="text/css">

#layer6,#layer7,#layer8{position: absolute;left: 0px;top: 0px;}
.anim_8{-webkit-animation-duration: 1.5s;-webkit-animation-iteration-count:infinite;-webkit-transform-origin:25px 25px;-webkit-animation-name:animation_6;-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear; -moz-animation-duration: 1.5s; -moz-animation-name: animation_6;  -moz-transform-origin:25px 25px; -moz-animation-iteration-count:infinite ; 
-o-animation-timing-function: linear; -o-animation-duration: 1.5s; -o-animation-name: animation_6;  -o-transform-origin:25px 25px; -o-animation-iteration-count:infinite ;}
@-webkit-keyframes animation_6{
0%{ -webkit-transform:  rotate(0deg)  ;}     
100%{ -webkit-transform:  rotate(360deg)  ;} 
}
@-o-keyframes animation_6{
0%{ -o-transform:  rotate(0deg)  ;}     
100%{ -o-transform:  rotate(360deg)  ;} 
}

@-moz-keyframes animation_6{
0%{ -moz-transform:  rotate(0deg)  ;}     
100%{ -moz-transform:  rotate(360deg)  ;} 
}       

</style> 

<script type="text/javascript">
window.addEventListener("load",draw_canvas,false) ;
function draw_canvas()
{
var c6=document.getElementById("layer6");var ctx6=c6.getContext("2d");  ctx6.fillStyle="#FF000



 drawProgressIndicator: function(){

    var can = this.imgCanvas;
    var ctx = this.imgCtx;

    ctx.save();
    ctx.clearRect(0, 0, can.width, can.height);
    ctx.translate(can.width / 2, can.height / 2);
    ctx.scale(0.4, 0.4);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    var step = this.animationStep;
    ctx.fillStyle = "black";
    ctx.save();
    ctx.rotate(step * Math.PI / 30);
    ctx.strokeStyle = "#33ccff";
    ctx.fillStyle = "#33ccff";
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(68, 0);
    ctx.stroke();
    ctx.fill();
    ctx.restore();
    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = 'gray';
    ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.restore();
    this.animationStep += 1;
},