|
|
@@ -501,42 +501,43 @@ define([ 'app/app' ], function(app) {
|
|
|
function blueCircle(n) {
|
|
|
context.save(); // 保存状态
|
|
|
// context.strokeStyle = '#fff'; //设置描边样式
|
|
|
- context.lineWidth = 5; //设置线宽
|
|
|
context.beginPath();//路径开始
|
|
|
- context.arc(contextX, contextY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
|
|
|
+ context.lineWidth = 3; //设置线宽
|
|
|
+ context.arc(contextX, contextY, 45, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
|
|
|
|
|
|
// 渐变色 - 可自定义
|
|
|
var linGrad = context.createLinearGradient(
|
|
|
- contextX-100-5, contextY, contextX+100+5, contextY
|
|
|
+ contextX-100-3, contextY, contextX+100+3, contextY
|
|
|
);
|
|
|
- linGrad.addColorStop(0.0, '#06a8f3');
|
|
|
- //linGrad.addColorStop(0.5, '#9bc4eb');
|
|
|
- linGrad.addColorStop(1.0, '#00f8bb');
|
|
|
+ linGrad.addColorStop(0.0, '#45b1fc');
|
|
|
+ linGrad.addColorStop(1.0, '#dbdbdb');
|
|
|
context.strokeStyle = linGrad;
|
|
|
context.lineCap = 'round';
|
|
|
// 用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
|
|
|
context.stroke();//绘制
|
|
|
context.closePath();//路径结束
|
|
|
- context.lineJoin = 'round'
|
|
|
context.restore();// 获取保存的状态
|
|
|
}
|
|
|
- //绘制2像素宽的背景白色外圈
|
|
|
+ //绘制3像素宽的背景白色外圈
|
|
|
function whiteCirecle() {
|
|
|
context.save();
|
|
|
context.beginPath();
|
|
|
- context.lineWidth = 2
|
|
|
- context.strokeStyle = 'red'
|
|
|
- context.arc(contextX, contextY, 100, 0, Math.PI * 2, false)
|
|
|
+ context.lineWidth = 3; //设置线宽
|
|
|
+ context.lineCap = "round";
|
|
|
+ // context.strokeStyle = '#dbdbdb';
|
|
|
+ context.strokeStyle = "#dbdbdb"
|
|
|
+ context.arc(contextX, contextY, 45, 0, Math.PI*2, false);
|
|
|
context.stroke();
|
|
|
context.closePath();
|
|
|
- context.restore()
|
|
|
+ context.restore();
|
|
|
}
|
|
|
function text(n) {
|
|
|
context.save();
|
|
|
- context.strokeStyle = '#fff';
|
|
|
- context.font = '40px Arial';
|
|
|
- context.strokeText(n.toFixed(0) + "%", contextX - 40, contextY + 10)
|
|
|
- context.stroke()
|
|
|
+ context.fillStyle = '#49b2fb';
|
|
|
+ var font_size = 20;
|
|
|
+ context.font = font_size + 'px Arial';
|
|
|
+ var text_width = context.measureText(n.toFixed(0)+"%").width;
|
|
|
+ context.fillText(n.toFixed(0) + "%", contextX - text_width/2, contextY + font_size / 2);
|
|
|
context.restore()
|
|
|
}
|
|
|
|
|
|
@@ -546,7 +547,12 @@ define([ 'app/app' ], function(app) {
|
|
|
text(speed)
|
|
|
blueCircle(speed)
|
|
|
}
|
|
|
-
|
|
|
+ (function drawFrame2(){
|
|
|
+ window.requestAnimationFrame(drawFrame2);
|
|
|
+ if(speed > 100) speed = 0;
|
|
|
+ speed += 0.1;
|
|
|
+ drawFrame(speed)
|
|
|
+ }());
|
|
|
}]);
|
|
|
|
|
|
//批量上架的Ctrl
|