一、旋转圆环 ```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实现旋转圆环和双色圆环
猜你喜欢
转载自blog.csdn.net/bao13716164418/article/details/91048512
今日推荐
周排行