39canvas achieve color ring and rotating ring

一、旋转圆环
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clickAppear {
            width: 200px;
            height: 70px;
            line-height: 70px;
            border-radius: 10px;
            background: gray;
            font-size: 40px;
            text-align: center;
        }

        .appearMark {
            width: 100%;
            height: 100%;
            background: cadetblue;
            z-index: 2;
            position: absolute;
            display: none;
            top: 0;
            opacity: 0.2;
        }

        .canvasDivOuter {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            z-index: 3;
        }

        .canvasDiv {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="clickAppear" id="clickAppear">点击上传</div>
<div class="appearMark" id="appearMark"></div>
<div class="canvasDivOuter">
    <div class="canvasDiv" id="canvasDiv">
        <canvas id="canvasSelf"></canvas>
    </div>
</div>
</body>
</html>
<script>
    var clickAppear = document.getElementById("clickAppear");
    var appearMark = document.getElementById("appearMark");
    var canvas = document.getElementById("canvasSelf");
    var context = canvas.getContext("2d");
    var timer = null;
    clickAppear.onclick = function () {
        appearMark.style.display = "block";
        context.beginPath();
        context.arc(50, 50, 40, 0, 4.5);
        /*第5个参数改为“2*Math.PI”就是一个整圆*/
        context.strokeStyle = "grey";
        context.lineWidth = "10";
        context.stroke();
        context.closePath();
        var canvasDiv = document.getElementById("canvasDiv");
        var beginDegree = 0;
        timer = setInterval(function () {
            beginDegree = beginDegree + 7;
            canvasDiv.style.transform = "rotate(100" + beginDegree + "deg)"
        }, 10);
        setTimeout(function () {
            clearInterval(timer)
        }, 3000)
    };
</script>

```
二、双色圆环
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clickAppear {
            width: 200px;
            height: 70px;
            line-height: 70px;
            border-radius: 10px;
            background: gray;
            font-size: 40px;
            text-align: center;
            user-select: none;
            cursor: pointer;
        }

        .canvasDiv {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="clickAppear" id="clickAppear">出现残环</div>
<div class="canvasDiv" id="canvasDiv">
    <canvas id="canvasSelf"></canvas>
</div>
</body>
</html>
<script>
    var clickAppear = document.getElementById("clickAppear");
    var canvas = document.getElementById("canvasSelf");
    var context = canvas.getContext("2d");
    function singleClick(random) {
        context.beginPath();
        context.arc(50, 50, 40, 0, random);
        context.strokeStyle = "grey";
        context.lineWidth = "10";
        context.stroke();
        context.closePath();
        context.beginPath();
        context.arc(50, 50, 40, random, 2 * Math.PI);
        context.strokeStyle = "red";
        context.lineWidth = "10";
        context.stroke();
        context.closePath();
    }
    clickAppear.onclick = function () {
        var random = (Math.random() * Math.PI);
        singleClick(random);
    };
</script>
```
39canvas achieve color ring and rotating ring

Guess you like
