JS Canvas定时器模拟动态加载动画

本文实例为大家分享了Canvas定时器动态加载动画，供大家参考，具体内容如下

<！DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style></style></head><body><canvas id="canvas" width="500" height="500">你的浏览器不支持canvas技术</canvas><script>var c=document.getElementById（"canvas"）;var ctx= c.getContext（"2d"）;ctx.translate（c.width/2, c.height/2）;//首先绘制8个静态环绕的圆形function create（） {for （var i = 1; i < 9; i++） {if （i==1） {ctx.beginPath（）;ctx.arc（0, -30, 5, 0, 2 * Math.PI）;ctx.fillStyle="#f0f";ctx.fill（）;}else{ctx.beginPath（）;ctx.arc（0, -30, 5, 0, 2 * Math.PI）;ctx.strokeStyle ="#000";ctx.stroke（）;}ctx.rotate（Math.PI * 45 / 180）;}}//定时转动setInterval（function（）{ctx.clearRect（-c.width/2,-c.height, c.width, c.height）;create（）;ctx.rotate（Math.PI*45/180）;},300）;//定时关闭加载setTimeout（function（）{ c.style.display="none"; },12200）;//</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。