この記事では、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>上記は、この記事のすべての内容です。