首页 > 代码库 > html5--等待加载效果
html5--等待加载效果
<!DOCTYPE HTML><html lang="zh-cmn-Hans"><head> <meta charset="UTF-8"> <title>等待载入</title></head><body> <canvas id="wait" height="100" width="100">你的浏览器不支持canvas</canvas> <script> var wait = document.getElementById(‘wait‘).getContext(‘2d‘); wait.fillRect(0,0,100,100); //translate() 方法重新映射画布上的 (0,0) 位置,canvas绘图是基于状态的 wait.translate(50,50); //每次旋转角度 var angle = Math.PI*2/12; var cos = Math.cos(angle); var sin = Math.sin(angle); wait.lineWidth = 4 ; wait.lineCap = ‘round‘ ; var c = 0; setInterval(rotate,25); function rotate(){ var col = Math.floor(200/6*(c%13)); c++; //任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图 //一个数学公式,每次旋转30度 wait.transform(cos,sin,-sin,cos,0,0); wait.strokeStyle = ‘rgba(0,0,‘+col+‘,1)‘; wait.beginPath(); wait.moveTo(10,0); wait.lineTo(40,0); wait.stroke(); } </script></body></html>
效果：
http://jsfiddle.net/aBK5Q/19/
html5--等待加载效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。