可视化2D动画—cavas旋转的圈
Posted 牟云飞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可视化2D动画—cavas旋转的圈相关的知识，希望对你有一定的参考价值。
1.1 RotatingCircle 介绍
Cavas动画组件RotatingCircle是一个能够自定义颜色、半径、排序方式的圆形组件，具有2D动画效果，可以单独使用也可以与echarts结合。组件由五个圆形图组成，每个部分是独立的参数控制，可以自定义图形宽度、长度、颜色以及半径等。
1.1.1 示例
控件独立使用：
echarts组合使用：
1.1.2 代码示例
（1）创建html文件，引入js文件
<script src="js/fatterRotating.mini.js"></script>（2）指定cavas元素在页面中的位置
<canvas id="canvasData" width="400px" height="400px" style="background: url('images/background.png')"></canvas>（3）定义全局变量，用于第（5）步动画操作
var circle ;
（4）初始化RotatingCircle组件，设置组件参数
var canvas = document.getElementById("canvasData");
var txtOpts={
//文字样式
};
var opts = [{
//动画图形样式
}];
circle = RotatingCircle(canvas,opts,txtOpts);
circle.init();
circle.chageTxt("80%");
//动起来
refer();（5）执行动画特效
为了减小性能消耗，所有的动画都在一个定时器内进行，如果有其他组件动画统一放入refer中，通过window.requestAnimationFrame(callback)函数进行重复调用, 回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。
//统一的动画入口
function refer(){
window.requestAnimationFrame(function(){
circle.createCircle();
refer();
});
}示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cavas动画组件RotatingCircle</title>
</head>
<body>
<canvas id="canvasData" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<script src="js/fatterRotating.js"></script>
<script>
var circle ;
function init(){
//第一个圆圈
var canvas = document.getElementById("canvasData");
var txtOpts={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts = [{
radius: 51,//半径，内圆动态线，
lineWidth: 10 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 50,//内圆线半径，静态的
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 53,//内刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 80,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:18, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle = RotatingCircle(canvas,opts,txtOpts);
circle.init();
circle.chageTxt("80%");
//动起来
refer();
}
//统一的动画入口
function refer(){
window.requestAnimationFrame(function(){
circle.createCircle();
refer();
});
}
init();
</script>
</body>
</html>1.1.3 参数说明
组件由五个圆形图组成，每个部分是独立的参数控制，可以自定义图形宽度、长度、颜色以及半径等。
1.1.3.1 文字参数
var txtOpts={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};| 参数 | 说明 | 备注 |
|---|---|---|
| content | 内容 | |
| txtColor | 文字颜色 | RGB(21,253,255)或者#FF0000 |
| align | 对齐方式 | 'center' |
| font | 文字样式 | CSS font 属性相同的语法 |
| textBaseline | 基线对齐方式 | //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic |
1.1.3.2内圆动态线（第一个圆）
{
radius: 51,//半径，内圆动态线，
lineWidth: 10 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
}
| 参数 | 说明 | 备注 |
|---|---|---|
| radius | 半径，内圆动态线 | 通过调整半径大小，能够自定义五个图形的排序方式，从而形成新的动画图形 |
| lineWidth | 宽度，调整动态线宽度 | |
| strokeStyle | 颜色，支持rgb rgba 网页等 | 颜色支持透明度RGBA(200,200,200,0.5) |
| degreeStart | 开始角度 | |
| degreeEnd | 结束角度 | |
| stepStart | 开始递增数量 | |
| stepEnd | 结束递增数量 | |
| angleSpeed | 转动速度 |
1.1.3.4静态外圆（第三个圆）
{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
}
| 参数 | 说明 | 备注 |
|---|---|---|
| radius | 半径 | 通过调整半径大小，能够自定义五个图形的排序方式，从而形成新的动画图形 |
| lineWidth | 宽度，调整动态线宽度 | 可以与其他重叠 |
| strokeStyle | 颜色，支持rgb rgba 网页等 | 颜色支持透明度RGBA(200,200,200,0.5) |
| degreeStart | 开始角度 | 如果不想使用该圆，可以设置开始角度与结束角度相同，或者设置透明度 |
| degreeEnd | 结束角度 |
1.1.3.5内刻度盘（第四个圆）
{
radius: 53,//内刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
}
| 参数 | 说明 | 备注 |
|---|---|---|
| radius | 半径 | 通过调整半径大小，能够自定义五个图形的排序方式，从而形成新的动画图形 |
| lineWidth | 刻度盘宽度 | |
| fillStyle | 刻度盘静态色 | 颜色支持透明度RGBA(200,200,200,0.5) |
| emFillStyle | 刻度盘变化色 | |
| lengthParam | 刻度线长度 | |
| step | 变化占用多少个格 | 数据需要0至60之间 |
1.1.3.6外刻度盘（第五个圆）
{
radius: 80,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:18, //变化占用多少个格 0-19
speed:0.4 //转动速度
}
| 参数 | 说明 | 备注 |
|---|---|---|
| radius | 半径 | 通过调整半径大小，能够自定义五个图形的排序方式，从而形成新的动画图形 |
lineWidth | 刻度盘宽度 | 可以与其他重叠 |
fillStyle | 刻度盘静态色 | 颜色支持透明度RGBA(200,200,200,0.5)`` |
emFillStyle | 刻度盘变化色 | |
step | 变化占用多少个格 | 数据需要0至19之间 |
speed | 转动速度 |
1.1.4 参数示例
1.1.4.1 示例1
//第一个圆圈
var canvas = document.getElementById("canvasData");
var txtOpts={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts = [{
radius: 51,//半径，内圆动态线，
lineWidth: 10 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 50,//内圆线半径，静态的
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 53,//内刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 80,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:18, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle = RotatingCircle(canvas,opts,txtOpts);
circle.init();
circle.chageTxt("80%");1.1.4.2 示例2
//第二个圆圈
var canvas2 = document.getElementById("canvasData2");
var txtOpts2={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts2 = [{
radius: 40,//半径，内圆动态线，
lineWidth: 40 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 50,//内圆线半径，静态的
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 53,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 50,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle2 = RotatingCircle(canvas2,opts2,txtOpts2);
circle2.init();
circle2.chageTxt("20%");
1.1.4.3 示例3
//第三个圆圈
var canvas3 = document.getElementById("canvasData3");
var txtOpts3={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts3 = [{
radius: 85,//半径，内圆动态线，
lineWidth: 2 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(21,255,255,1)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 3,
strokeStyle: 'RGBA(19,238,240,1)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 55,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 75,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:1,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 50,//外刻度盘
lineWidth: 3, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle3 = RotatingCircle(canvas3,opts3,txtOpts3);
circle3.init();
circle3.chageTxt("20%");
1.1.4.4 示例4
var canvas4 = document.getElementById("canvasData4");
var txtOpts4={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts4 = [{
radius: 72,//半径，内圆动态线，
lineWidth: 2 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(255,255,255,1)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 5,
strokeStyle: 'RGBA(21,255,255,0.5)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 75,//内刻度盘
lineWidth: 1, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:19,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 50,//外刻度盘
lineWidth: 2, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle4 = RotatingCircle(canvas4,opts4,txtOpts4);
circle4.init();
circle4.chageTxt("20%");
源码文件：-----fatterRotating.mini.js-----
function RotatingCircle(canvas,optsParam,txtOptsParam){var obj=new Object();obj.ctx=canvas.getContext('2d');if(0==canvas.clientWidth||0==canvas.clientHeight){obj.size=Math.min(canvas.width,canvas.height)}else{obj.size=Math.min(canvas.clientWidth,canvas.clientHeight)}obj.opts=optsParam;obj.txtOpts=txtOptsParam;obj.degreeStart=0;obj.degreeEnd=0;obj.clockmoveStep=0;obj.clockmoveStepOut=0;obj.init=function(){obj.createCircle()};obj.createFont=function(){this.ctx.clearRect(0,0,this.size,this.size);this.ctx.font="30px Arial";this.ctx.fillText("Hello World",this.size,this.size)};obj.createCircle=function(){var _curOpts=this.opts[0];var radius=_curOpts.radius;var lineWidth=_curOpts.lineWidth;var strokeStyle=_curOpts.strokeStyle;var stepStart=_curOpts.stepStart;var stepEnd=_curOpts.stepEnd;var angleSpeed=_curOpts.angleSpeed;this.degreeStart=this.degreeStart+stepStart;this.degreeEnd=this.degreeEnd+stepEnd;if(this.degreeStart-360>this.degreeEnd){this.degreeStart-=720}this.ctx.clearRect(0,0,this.size,this.size);this.ctx.lineWidth=lineWidth;this.ctx.strokeStyle=strokeStyle;this.ctx.beginPath();this.ctx.arc(this.size/ 2, this.size /2,radius-lineWidth/ 2, (this.degreeStart < this.degreeEnd ? this.degreeStart : this.degreeEnd) * Math.PI /180,(this.degreeStart<this.degreeEnd?this.degreeEnd:this.degreeStart)*Math.PI/180,false);this.ctx.stroke();this.ctx.save();var _curOpts2=this.opts[1];var lineWidth2=_curOpts2.lineWidth;var strokeStyle2=_curOpts2.strokeStyle;var radius2=_curOpts2.radius;var degreeStart2=_curOpts2.degreeStart;var degreeEnd2=_curOpts2.degreeEnd;this.ctx.lineWidth=lineWidth2;this.ctx.strokeStyle=strokeStyle2;this.ctx.beginPath();this.ctx.arc(this.size/ 2, this.size /2,radius2-lineWidth2/ 2, (degreeStart2) * Math.PI /180,(degreeEnd2)*Math.PI/180,false);this.ctx.stroke();this.ctx.restore();this.ctx.save();var _curOpts4=this.opts[3];var _emFillStyle4=_curOpts4.emFillStyle;var _fillStyle4=_curOpts4.fillStyle;var _step4=_curOpts4.step;var _radius4=_curOpts4.radius;var _lengthParam4=_curOpts4.lengthParam;this.ctx.lineWidth=_curOpts4.lineWidth;this.ctx.translate(this.size/ 2, this.size /2);for(var i=0;i<60;i++){if(i%5!=0){if(i>=this.clockmoveStep&&i<this.clockmoveStep+_step4){this.ctx.strokeStyle=_emFillStyle4}else{this.ctx.strokeStyle=_fillStyle4}this.ctx.beginPath();this.ctx.moveTo(_radius4,0);this.ctx.lineTo(_radius4+_lengthParam4,0);this.ctx.stroke()}this.ctx.rotate((-Math.PI/30))}this.clockmoveStep=this.clockmoveStep>=60?0:(this.clockmoveStep+0.5);this.ctx.restore();this.ctx.save();var _curOpts3=this.opts[2];var lineWidth3=_curOpts3.lineWidth;var strokeStyle3=_curOpts3.strokeStyle;var radius3=_curOpts3.radius;var degreeStart3=_curOpts3.degreeStart;var degreeEnd3=_curOpts3.degreeEnd;this.ctx.lineWidth=lineWidth3;this.ctx.strokeStyle=strokeStyle3;this.ctx.beginPath();this.ctx.arc(this.size/ 2, this.size /2,radius3+lineWidth3+14,(degreeStart3)*Math.PI/ 180, (degreeEnd3) * Math.PI /180,false);this.ctx.stroke();this.ctx.restore();this.ctx.save();this.ctx.beginPath();this.ctx.restore();this.ctx.font=this.txtOpts.font;this.ctx.textAlign=this.txtOpts.align;this.ctx.fillStyle=this.txtOpts.txtColor;this.ctx.textBaseline=this.txtOpts.textBaseline;this.ctx.fillText(this.txtOpts.content,this.size/ 2, this.size /2);this.ctx.restore();this.ctx.save();var _curOpts5=this.opts[4];var _emFillStyle5=_curOpts5.emFillStyle;var _fillStyle5=_curOpts5.fillStyle;var _step5=_curOpts5.step;var _speed5=_curOpts5.speed;var _radius5=_curOpts5.radius;var _lineWidth5=_curOpts5.lineWidth; this.ctx.translate(this.size/ 2, this.size /2);this.ctx.lineWidth=_lineWidth5;for(var i=0;i<60;i++){if((i>=this.clockmoveStepOut&&i<this.clockmoveStepOut+_step5)){this.ctx.fillStyle="RGBA("+_emFillStyle5+","+(i-this.clockmoveStepOut)/20+")"}else if(i>=(this.clockmoveStepOut+20)&&i<this.clockmoveStepOut+20+_step5){this.ctx.fillStyle="RGBA("+_emFillStyle5+","+(i-this.clockmoveStepOut-20)/20+")"}else if(i>=(this.clockmoveStepOut+40)&&i<this.clockmoveStepOut+40+_step5){this.ctx.fillStyle="RGBA("+_emFillStyle5+","+(i-this.clockmoveStepOut-40)/20+")"}else if(this.clockmoveStepOut+(40+_step5)>60&&i<(this.clockmoveStepOut+(40+_step5)-60)){this.ctx.fillStyle="RGBA("+_emFillStyle5+","+(20-this.clockmoveStepOut+i)/20+")"}else{this.ctx.fillStyle=_fillStyle5}this.ctx.beginPath();this.ctx.arc(_radius5,0,_lineWidth5,0,Math.PI*2,false);this.ctx.fill();this.ctx.rotate((Math.PI/30))}this.clockmoveStepOut=this.clockmoveStepOut>=20?0:(this.clockmoveStepOut+_speed5);this.ctx.restore()};obj.chageTxt=function(contentTxt){if(null!=this.txtOpts){this.txtOpts.content=contentTxt}};return obj};源码文件：-----html页面-----
<!DOCTYPE html>
<html lang="en">
<head>
<!--
牟云飞
15562579597
-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvasData" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData2" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData3" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData4" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData5" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData6" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData7" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<canvas id="canvasData8" width="400px" height="400px" style="background: url('images/background.png')"></canvas>
<script src="js/fatterRotating.mini.js"></script>
<script>
var circle ;
var circle2 ;
var circle3 ;
var circle4 ;
var circle5 ;
var circle6 ;
var circle7 ;
var circle8 ;
function init(){
//第一个圆圈
var canvas = document.getElementById("canvasData");
var txtOpts={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts = [{
radius: 51,//半径，内圆动态线，
lineWidth: 10 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 50,//内圆线半径，静态的
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: 360,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 53,//内刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 80,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:18, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle = RotatingCircle(canvas,opts,txtOpts);
circle.init();
circle.chageTxt("80%");
//第二个圆圈
var canvas2 = document.getElementById("canvasData2");
var txtOpts2={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts2 = [{
radius: 40,//半径，内圆动态线，
lineWidth: 40 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 50,//内圆线半径，静态的
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 53,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 50,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle2 = RotatingCircle(canvas2,opts2,txtOpts2);
circle2.init();
circle2.chageTxt("20%");
//第三个圆圈
var canvas3 = document.getElementById("canvasData3");
var txtOpts3={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts3 = [{
radius: 85,//半径，内圆动态线，
lineWidth: 2 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(21,255,255,1)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 3,
strokeStyle: 'RGBA(19,238,240,1)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 55,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 75,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:1,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 50,//外刻度盘
lineWidth: 3, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle3 = RotatingCircle(canvas3,opts3,txtOpts3);
circle3.init();
circle3.chageTxt("20%");
//第三个圆圈
var canvas4 = document.getElementById("canvasData4");
var txtOpts4={
content:'40%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts4 = [{
radius: 72,//半径，内圆动态线，
lineWidth: 2 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(255,255,255,1)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 5,
strokeStyle: 'RGBA(21,255,255,0.5)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 75,//内刻度盘
lineWidth: 4, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:12,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 50,//外刻度盘
lineWidth: 2, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle4 = RotatingCircle(canvas4,opts4,txtOpts4);
circle4.init();
circle4.chageTxt("20%");
//第五个圆圈
var canvas5 = document.getElementById("canvasData5");
var txtOpts5={
content:'88%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts5 = [{
radius: 90,//半径，内圆动态线，
lineWidth: 20 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(21,253,255,0.5)',//颜色，支持rgb rgba 网页等
degreeStart: -90,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 50,//内圆线半径，静态的
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: 360,
degreeEnd: 360
},{
radius: 50,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: '#eeeeee',
degreeStart: -90,
degreeEnd: 360
},{
radius: 53,//内刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 80,//外刻度盘
lineWidth: 5, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0)',//外刻度盘，静态色
emFillStyle: '219,38,40',//外刻度盘，变化色
step:18, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle5 = RotatingCircle(canvas5,opts5,txtOpts5);
circle5.init();
circle5.chageTxt("66%");
//第六个圆圈
var canvas6 = document.getElementById("canvasData6");
var txtOpts6={
content:'88%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts6 = [{
radius: 60,//半径，内圆动态线，
lineWidth: 6 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.6)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 3,
strokeStyle: 'RGBA(19,238,240,1)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 55,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: 'RGBA(19,238,240,0)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 70,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:2,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 85,//外刻度盘
lineWidth: 3, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0.3)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle6 = RotatingCircle(canvas6,opts6,txtOpts6);
circle6.init();
circle6.chageTxt("66%");
//第七个圆圈
var canvas7 = document.getElementById("canvasData7");
var txtOpts7={
content:'88%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts7 = [{
radius: 60,//半径，内圆动态线，
lineWidth: 6 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.6)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 3,
strokeStyle: 'RGBA(19,238,240,1)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 55,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: 'RGBA(19,238,240,0)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 70,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:6,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 85,//外刻度盘
lineWidth: 6, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0.3)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle7 = RotatingCircle(canvas7,opts7,txtOpts7);
circle7.init();
circle7.chageTxt("66%");
//第八个圆圈
var canvas8 = document.getElementById("canvasData8");
var txtOpts8={
content:'88%',
txtColor:'RGB(21,253,255)',
align:'center',
font: '30px Arial', //CSS font 属性相同的语法
textBaseline:'middle' //基线对齐选项,top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
};
var opts8 = [{
radius: 60,//半径，内圆动态线，
lineWidth: 30 ,//宽度，调整动态线宽度
strokeStyle: 'RGBA(200,200,200,0.6)',//颜色，支持rgb rgba 网页等
degreeStart: -180,//开始角度
degreeEnd: 200,//结束角度
stepStart: 4,//开始递增数量
stepEnd: 3,//结束递增数量
angleSpeed:0.01//转动速度
},{
radius: 65,//内圆线半径，静态的
lineWidth: 3,
strokeStyle: 'RGBA(19,238,240,1)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 55,//静态最外成圈，非刻度盘
lineWidth: 1,
strokeStyle: 'RGBA(19,238,240,0)',
degreeStart: -90,
degreeEnd: 360
},{
radius: 70,//内刻度盘
lineWidth: 8, //刻度盘宽度
fillStyle:'RGBA(19,238,240,1)',//内刻度盘，静态色
emFillStyle: 'RGB(255,255,255)',//内刻度盘，变化色
lengthParam:16,//刻度线长度
step: 10 //变化占用多少个格 0-60
},{
radius: 85,//外刻度盘
lineWidth: 6, //刻度盘宽度
fillStyle:'RGBA(21,253,255,0.3)',//外刻度盘，静态色
emFillStyle: '21,253,255',//外刻度盘，变化色
step:12, //变化占用多少个格 0-19
speed:0.4 //转动速度
}];
circle8 = RotatingCircle(canvas8,opts8,txtOpts8);
circle8.init();
circle8.chageTxt("66%");
//动起来
refer();
}
//统一的动画入口
function refer(){
window.requestAnimationFrame(function(){
circle.createCircle();
circle2.createCircle();
circle3.createCircle();
circle4.createCircle();
circle5.createCircle();
circle6.createCircle();
circle7.createCircle();
circle8.createCircle();
refer();
});
}
init();
</script>
</body>
</html>以上是关于可视化2D动画—cavas旋转的圈的主要内容，如果未能解决你的问题，请参考以下文章
如何使用新的 Unity4.3 2D 框架正确翻转 2D 角色？ （动画期间游戏对象的旋转）