87,989
社区成员
发帖
与我相关
我的任务
分享
...全文
请发表友善的回复…
发表回复
天际的海浪 2019-09-03
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #000033;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
var num = 0;
var max = 500;
var r = Math.PI/180;
function draw(n) {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.strokeStyle = "#000099";
ctx.shadowBlur = 0;
ctx.beginPath();
ctx.arc(200,200,150,120*r,420*r,false);
ctx.stroke();
ctx.strokeStyle = "#00FFFF";
ctx.shadowColor = "#CCFFFF";
ctx.shadowBlur = 20;
ctx.beginPath();
ctx.arc(200,200,150,120*r,(120+(420-120)*n)*r,false);
ctx.stroke();
}
function animate() {
draw(num/max);
if (++num<=max)
setTimeout(animate, 20);
}
animate();
</script>
</body>
</html>天际的海浪 2019-09-03
- 打赏
- 举报
用canvas的arc()来画，很简单的。
cn00439805 2019-09-03
- 打赏
- 举报
这种用css写也很简单
#麻辣小龙虾# 2019-09-03
- 打赏
- 举报
我找到了一个查看是不是你想要的，如果不是你看下百度echart那边有没有对应的。这种仪表盘有很多的。
https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G
