<!DOCTYPE html>
<html>
<style>
body{
background: #021032;
}
</style>
<body>
<canvas id="myCanvas" width="300" height="300">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
/**
* 求坐标位置
* author: xuhengfeng <564297479@qq.com>
* @param {Number} x 圆心的横坐标
* @param {Number} y 圆心的纵坐标
* @param {Number} r 半径
* @param {Number} radian 弧度
* 180/Math.PI 角度制 一弧度所对应的角度
* Math.PI/180 弧度制 一角度所对应的弧度
*/
function point(x, y, r, radian) {
var x1;//x坐标
var y1;//y坐标
x1 = x + Math.cos(radian) * r ;
y1 = y + Math.sin(radian) * r ;
return {
x: x1,
y: y1
}
}
</script>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var c_width = 300;//外圆的宽度
var c_height = 300;//外圆的高度
var c_r = 80;//外圆的半径
function draw(n) {
ctx.clearRect(0, 0, c_width, c_height);
// 外圆
ctx.beginPath();
ctx.arc(c_width/2, c_height/2, c_r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "#ccc"; //填充颜色
ctx.fill();
// 画内部空白
ctx.beginPath();
ctx.arc(c_width/2, c_height/2, c_r-10, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = '#021032'; // 填充内部颜色
ctx.fill();
// 坐标位置
var opts = point(c_width/2, c_height/2, c_r-5, ((Math.PI * 2) * n ) - Math.PI / 2, false);
var x1 = opts.x;
var y1 = opts.y;
// 绘制线条
// ctx.beginPath();
// ctx.strokeStyle = "#2e75e3";
// ctx.lineCap = "round";
// ctx.lineWidth = 10;//绘制内圆的线宽度
// ctx.arc(c_width/2, c_height/2, c_r-5, -(Math.PI / 2), ((Math.PI * 2) * n ) - Math.PI / 2, false);
// ctx.stroke();
ctx.beginPath();
var lg = ctx.createLinearGradient( 0, 0, 400, 500 );
lg.addColorStop( 0, "#2e75e3");
// lg.addColorStop( 0.5, "#2e75e3");
lg.addColorStop( 1, "#f00");
ctx.strokeStyle = lg;
ctx.lineCap = "round";
ctx.lineWidth = 10;//绘制内圆的线宽度
ctx.arc(c_width/2, c_height/2, c_r-5, -(Math.PI / 2), ((Math.PI * 2) * n ) - Math.PI / 2, false);
ctx.stroke();
// 画发光的圆点
// ctx.beginPath();
// ctx.shadowBlur=20;
// ctx.shadowColor="green";
// ctx.arc(x1,y1,8,0,Math.PI*2,true);
// ctx.fillStyle="#fff";
// ctx.fill();
// 画发光的圆点
ctx.beginPath();
var rg =ctx.createRadialGradient(x1,y1,1, x1, y1, 25);
rg.addColorStop(0, '#278cfe');
rg.addColorStop(0.5, '#27fac3');
rg.addColorStop(1, 'yellow');
ctx.arc(x1,y1,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle = rg;
ctx.fill();
//在中间写字
var n2 = Number(n*100).toFixed(0);
ctx.font = "bold 50px Arial"; // 字体大小，样式
ctx.fillStyle = "#fff"; // 颜色
ctx.textAlign = 'center'; // 位置
ctx.textBaseline = 'middle';
ctx.moveTo(c_width/2, c_height/2); // 文字填充位置
ctx.fillText(n2+"%", c_width/2, c_height/2);
}
var value= Number(66);// 当前百分比,数值
var timer=null,n=0;
function loadCanvas(nowT){
timer = setInterval(function(){
if(n>nowT){
clearInterval(timer);
}else{
n += 0.008;
draw(n);
}
},15);
}
loadCanvas(value/100);
</script>
</body>
</html>
网友评论