2D アニメーションの可視化 - 大静脈の回転円

開発 2023-05-08 02:48:09 訪問数: null

1.1 RotatingCircle の紹介

Cavas アニメーション コンポーネント RotatingCircle は、色、半径、および並べ替え方法をカスタマイズできる円形コンポーネントで、2D アニメーション効果があり、単独で使用することも、echarts と組み合わせて使用​​することもできます。コンポーネントは 5 つの円形グラフで構成され、各部分は独立したパラメーターによって制御され、グラフの幅、長さ、色、および半径をカスタマイズできます。

1.1.1 例

コントロールは独立して使用されます。

echarts兼用：

1.1.2 コード例

(1) htmlファイルの作成とjsファイルのインポート

<script src="js/fatterRotating.mini.js"></script>

(2) ページ上のキャバス要素の位置を指定する

<canvas id="canvasData" width="400px" height="400px" style="background: url('images/background.png')"></canvas>

(3) 手順 (5) のアニメーション操作のグローバル変数を定義します。

var円;

(4) RotatingCircle コンポーネントの初期化とコンポーネントのパラメーターの設定

   var canvas = document.getElementById("canvasData");
    var txtOpts={
                    //文字样式
                };
    var opts = [{
                    //动画图形样式
            }];
    circle = RotatingCircle(canvas,opts,txtOpts);
    circle.init();
    circle.chageTxt("80%");
    //动起来
    refer();

(5)アニメーションの特撮を行う

パフォーマンスの消費を減らすために、すべてのアニメーションはタイマー内で実行されます. 参照に入れられた他のコンポーネント アニメーションがある場合、それらは window.requestAnimationFrame(callback) 関数を通じて繰り返し呼び出され、コールバック関数の実行回数は通常 1 秒あたり 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 パラメータの説明

コンポーネントは 5 つの円形グラフで構成され、各部分は独立したパラメーターによって制御され、グラフの幅、長さ、色、および半径をカスタマイズできます。

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
};
パラメータ 例証する 述べる
コンテンツ コンテンツ
txtの色 テキストの色 RGB(21,253,255) または #FF0000
整列する アラインメント '中心'
フォント 文字スタイル CSS フォント プロパティと同じ構文
テキストベースライン ベースラインの配置 //ベースライン配置オプション、上、ぶら下げ、中、アルファベット、表意文字、下。デフォルト値はアルファベットです

1.1.3.2 内円動線（最初の円）

{ 
    radius: 51,//radius, inner circle dynamic line, 
    lineWidth: 10 ,//width, 動的な線幅を調整
    strokeStyle: 'RGBA(200,200,200,0.5)',//color, rgb rgba Web ページなどをサポート
    degreeStart : -90 ,//開始角度
    degreeEnd: 200,//終了角度
    stepStart: 4,//開始増分量
    stepEnd: 3,//終了増分量
    angleSpeed:0.01//回転速度
}
パラメータ 例証する 述べる
半径 半径、内円のダイナミック ライン 半径のサイズを調整することで、5 つのグラフィックの順序をカスタマイズして、新しいアニメーション グラフィックを形成できます。
線幅 幅、動的線幅の調整
ストロークスタイル 色、rgb rgba Web ページのサポートなど。 色は透明度をサポート RGBA(200,200,200,0.5)
度開始 開始角度
度終了 エンドアングル
ステップ開始 数量の増加を開始
stepEnd 最終増分数量
角度速度 回転速度

1.1.3.4 静的な外円 (3 番目の円)

{ 
    radius: 50,//静的な最外円、非ダイヤル
    lineWidth: 1、
    strokeStyle: '#eeeeee'、
    degreeStart: -90、
    degreeEnd: 360 
}
パラメータ 例証する 述べる
半径 半径 半径のサイズを調整することで、5 つのグラフィックの順序をカスタマイズして、新しいアニメーション グラフィックを形成できます。
線幅 幅、動的線幅の調整 他のものと重ねることができます
ストロークスタイル 色、rgb rgba Web ページのサポートなど。 色は透明度をサポート RGBA(200,200,200,0.5)
度開始 開始角度 円を使用したくない場合は、開始角度を終了角度と同じに設定するか、透明度を設定できます
度終了 エンドアングル

1.1.3.5 内側ダイヤル (4 番目の円)

{ 
    radius: 53,//内側のダイヤル
    lineWidth: 5, //ダイヤルの幅
    fillStyle:'RGBA(19,238,240,1)',//内側のダイヤル, 静的カラー
    emFillStyle: 'RGB(255,255,255)',//内側のダイヤル, 変更color 
    lengthParam:6, //スケール ラインの長さ
    step: 10 //変化が占める目盛りの数 0-60 
}
パラメータ 例証する 述べる
半径 半径 半径のサイズを調整することで、5 つのグラフィックの順序をカスタマイズして、新しいアニメーション グラフィックを形成できます。
線幅 ダイヤル幅
塗りつぶしスタイル ダイヤルの静的な色 色は透明度をサポート RGBA(200,200,200,0.5)
emFillStyle 文字盤の色が変わる
lengthParam 目盛りの長さ
ステップ 変更が占めるグリッド数 データは 0 から 60 の間である必要があります

1.1.3.6 外ダイヤル（5 番目の円）

{ 
    radius: 80,//外側ダイヤル
    lineWidth: 5, //ダイヤル幅
    fillStyle:'RGBA(21,253,255,0)',//外側ダイヤル, 静的カラー
    emFillStyle: '219,38,40',// 外側ダイヤル,変更色
    step:18, //変更が占める分割数 0-19 
    speed:0.4 //回転速度
}
パラメータ 说明 备注
半径 半径 通过调整半径大小，能够自定义五个图形的排序方式，从而形成新的动画图形
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>

おすすめ

転載: blog.csdn.net/myfmyfmyfmyf/article/details/120949314
おすすめ
ランキング
[データベース] H2 DateBaseの使用を拡大します
この世界を行い、あなたは人々が軽蔑与えます
2109-Docker课上问题总结
nuxコマンドの概要sedコマンドの詳細な説明
関係図、資本図の開発
ログアウトし、すべて閉じブラウザ/タブを閉じます
プログラミングの基礎再テストアサルト
Camera Calibration in Computer Vision Algorithms
人工知能: あなたのための未来の仕事
検証メソッドpublic抽象...異常原因と解決のためのクエリに失敗しました：JavaのJPAは、java.lang.IllegalArgumentExceptionが報告しました
アーカイブ
もっと
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)

コードワールド

© 2018 codetd.com