Javascript HTML5 画布中的简单加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14598761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple loading animation in HTML5 canvas
提问by Jacob
I am looking for a simple image loading animation. I would like to find a short and simple sollution that only uses drawing on the canvas and plain Javascript.
我正在寻找一个简单的图像加载动画。我想找到一个简短而简单的解决方案，它只使用画布上的绘图和普通的 Javascript。
Pleas help
请帮忙
采纳答案by Jacob
This article:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animationshelped me draw my own animation.
这篇文章：https: //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations帮助我绘制了自己的动画。
回答by Zorayr
I would use a loading GIF generated by an online tool such as Ajaxload.infoor Preloaders.netand place it in a div tag that you may toggle in front of the canvas element.
我会使用由Ajaxload.info或Preloaders.net等在线工具生成的加载 GIF并将其放置在 div 标签中，您可以在 canvas 元素前切换该标签。
For more spinner generator scripts see 5 Online Loading AJAX Spinner Generator Tools.
有关更多微调器生成器脚本，请参阅5 在线加载 AJAX 微调器生成器工具。
Hope this helps!
希望这可以帮助！
回答by Jacob
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;
},
回答by Swarnendu Paul
try this one .. http://jsfiddle.net/swarnendu/Ky25d/
试试这个.. http://jsfiddle.net/swarnendu/Ky25d/
<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
回答by jing3142
Here is an animation that uses only javascript and canvas - animationIt was created using the application canvimationthe help files for this are here.
这是一个仅使用 javascript 和 canvas- animation 的动画它是使用应用程序创建的，相关的帮助文件在这里。
However as it does not use images and it is not simple it may not be what you are looking for.
但是，由于它不使用图像并且它并不简单，因此它可能不是您想要的。
The only other way I could think would be to use context.drawImagealong with setTimeoutto load a series of images on after another
我能想到的唯一另一种方法是使用context.drawImage和setTimeout一个接一个地加载一系列图像
OR really simply use a gif image in canvas as in the code below
或者真的只是在画布中使用 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>
回答by Phan Van Linh
Here is my loading which have 2 circle using canvas
这是我的加载，它使用画布有 2 个圆圈
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
canvas.style.backgroundColor = "black";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var bigCircle = {
center: {
x: 100,
y: 100
},
radius: 50,
speed: 4
}
var smallCirlce = {
center: {
x: 100,
y: 100
},
radius: 30,
speed: 2
}
var progress = 0;
function loading() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
progress += 0.01;
if (progress > 1) {
progress = 0;
}
drawCircle(bigCircle, progress);
drawCircle(smallCirlce, progress);
requestAnimationFrame(loading);
}
loading();
function drawCircle(circle, progress) {
ctx.beginPath();
var start = accelerateInterpolator(progress) * circle.speed;
var end = decelerateInterpolator(progress) * circle.speed;
ctx.arc(circle.center.x, circle.center.y, circle.radius, (start - 0.5) * Math.PI, (end - 0.5) * Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.fill();
ctx.stroke();
}
function accelerateInterpolator(x) {
return x * x;
}
function decelerateInterpolator(x) {
return 1 - ((1 - x) * (1 - x));
}Hope it help
希望有帮助
回答by Swarnendu Paul
If you are searching for a simple loading animation with html5 canvas then here it is.. http://jsfiddle.net/swarnendu/urV4p/
如果您正在使用 html5 画布搜索简单的加载动画，那么这里是 .. http://jsfiddle.net/swarnendu/urV4p/
<html>
<head>
<style type="text/css">
#d1,#ci1,#ci2,#ci3{position:absolute;top:0px;left:0px}
.cc2{ -webkit-animation-duration: 1s; -webkit-animation-name: loading2w; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 1s; -moz-animation-name: loading2m; -moz-animation-iteration-count:infinite; -o-animation-duration: 1s; -o-animation-name: loading2o; -o-animation-iteration-count:infinite;}
.cc3{ -webkit-animation-duration: 1s; -webkit-animation-name: loading3w; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 1s; -moz-animation-name: loading3m; -moz-animation-iteration-count:infinite; -o-animation-duration: 1s; -o-animation-name: loading3o; -o-animation-iteration-count:infinite;}
@-webkit-keyframes loading2w{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
@-moz-keyframes loading2m{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
@-o-keyframes loading2o{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
@-webkit-keyframes loading3w
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
@-moz-keyframes loading3m
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
@-o-keyframes loading3o
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
</style>
<script type="text/javascript">
window.addEventListener("load",win_load,false);
function win_load()
{
var c10=document.getElementById("ci1");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("Loading .",5,15);
var c10=document.getElementById("ci2");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText(" .",5,15);
var c10=document.getElementById("ci3");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText(" .",5,15);
}
</script>
</head>
<body>
<div id="d1">
<canvas id="ci1" class="cc1" width="100" height="100"></canvas>
<canvas id="ci2" class="cc2" width="100" height="100"></canvas>
<canvas id="ci3" class="cc3" width="100" height="100"></canvas>
</div>
</body>
