html5--等待加载效果

时间：2023-03-09 17:00:35
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/

相关文章