この記事では、HTML5キャンバスを紹介して、円形の進行状況バーを実現し、デジタルパーセンテージ効果の例を表示します。
効果を達成します
1.最初にHTMLコードを作成します
<canvas id = canvas width = 500 height = 500 style = background:#000;> </canvas>
2。キャンバス環境を作成します
var canvas = document.getElementbyId( 'canvas')、// get canvas element context = canvas.getContext( '2d')、//描画環境を取得し、2d centerx = canvas.width/2、// canva centerとして示すポイントx軸座標センター= canvas.height/2、// canvas center point y -axis座標rad = math.pi*2/100、// 360度を100コピーに分割し、それぞれがRAD度です。速度= 0.1; / / / /速度と遅いロード、それに頼るだけです
3. 5ピクセルの幅スポーツの外側の円を描きます
// bluecircle(n){context.strokestyle = #fff; ; //パスはContext.Arcを開始します(CenterX、100、-math.pi/2、-math.pi/2 +n*rad、false);角度、時計回り/context.stroke();4.白い外側のリングを描きます
//白いwhitecir(){context.beginpath(); 、false); stroke();5。テキスト描画パーセント
関数テキスト(n){context.save(); //フォントサイズとフォントを設定し、指定された位置コンテキストを描画しますdrawings.restore();}6.それを運動させてください
//アニメーションサイクル(function drawframe(){window.requestanimationframe(drawframe); context.clearrect(0、0、canvas.width、canvas.height); whitecir(); te xt(speed); bluecircle(速度); if(if(速度> 100)速度= 0;速度+= 0.1;}());完全なコード
<! {Text-Align:Center-Color:#000;} </style> </head> <canvas id = canvas width = 500 style =背景:#000;> </canvas> <スクリプト> window.onload = function(){var canvas = document.getElementbyId( 'canvas')、// get canvas element context = canvas.getContext( '2d')、 / / / / / / 2d centerx = canvas.width/2、// canvas center point x -axis cendry = canvas.height/2、// canvas center point y -axis rad = math.pi*2/100、// 360度を分割する100には、すべての部分がrad度= 0.1の速度です。 ; context.strokestle = #fff; .pi/2、-math.pi/2 +n*rad、false); ();描画context.closepath(); ; LineWidth = 2; )context.rest.restore(); /描画スタイルの描画スタイルを設定します= 40px //フォントを設定します。 、中心+10);(); 0.1;}();} </script> </body> </html>上記は、この記事のすべての内容です。