- <!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>
来源: http://www.qdfuns.com/article/40901/1c9a825e60591a5f863304cd710c458f.html