H5研究五:菊花加载动画JS

H5研究五:菊花加载动画JS_第1张图片
···

知识点:
1.canvas使用:HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
2.arc() 方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧。
3.随机色
4.动态添加H5标签
5.定时器
6.数组处理

一、定时器

var t=setTimeout("javascript语句",毫秒)
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()

二、创建节点

createElement() 方法可创建元素节点。
此方法可返回一个 Element 对象。
在列表中添加项目:
document.getElementById("myList").appendChild(newListItem);

三、画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
圆:arc(x, y, radius, startAngle, endAngle, counterclockwise)

四、数组处理

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

五、随机色

function randomColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + ',' + g + ',' + b + ")"; //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
            }

H5研究五:菊花加载动画JS_第2张图片
所有代码:


<html>

    <head>
        <meta charset="utf-8">
        <title>title>
    head>

    <body>
        <div>
            <button onclick="pauseTimer()">停止button>
            <button onclick="starTimer()">开始button>
        div>


    body>
    <script>
        function pauseTimer() {
            clearTimeout(canvasTimer)
        }

        function starTimer() {
            progressModel({
            x: 50,
            y: 50,
            size: 20,
            degrees: 30
        });
        }



        function progressModel(data) {

            var canvas = document.createElement('canvas');
            canvas.height = 100;
            canvas.width = 300;
            document.getElementsByTagName('body')[0].appendChild(canvas);
            var ctx = canvas.getContext("2d"),
                i = 0,
                degrees = data.degrees,
                loops = 0,
                degreesList = [];

            for(i = 0; i < degrees; i++) {
                degreesList.push(i);
            }


            i = 0;
            function reset() {
                ctx.clearRect(0, 0, 100, 100); // clear canvas
            }
            canvasTimer = setInterval(draw, 1000 / degrees);

            function draw() {
                var c, s, e;

                var d = 0;

                if(i == 0) {
                    reset();
                }

                ctx.save();

                d = degreesList[i];
                c = Math.floor(255 / degrees * i);
                ctx.strokeStyle = randomColor();
                ctx.lineWidth = data.size;
                ctx.beginPath();
                s = Math.floor(360 / degrees * (d));
                e = Math.floor(360 / degrees * (d + 1)) - 1;
                console.log(s, e)
                ctx.arc(data.x, data.y, data.size, (Math.PI / 180) * s, (Math.PI / 180) * e, false);
                console.log(3.14 / 180, (Math.PI / 180) * e)
                ctx.stroke();

                ctx.restore();

                i++;
                if(i >= degrees) {
                    i = 0;
                }
            }

            function randomColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + ',' + g + ',' + b + ")"; //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
            }
        }
    script>

html>

你可能感兴趣的:(H5+CSS+JS+OC研究)