<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8">
<スタイルタイプ= "テキスト/ cssの">
#myCanvas {
マージン：0自動;
表示ブロック;
}
</スタイル>
</ head>の
<身体>
<キャンバスのid =「myCanvas」>キャンバスアセンブリをサポートしていない現在のブラウザ、アップグレードしてください！</キャンバス>
ます。<script type = "text / javascriptの">
//方法1：動的円アーク
VaRのC =のdocument.getElementById（ 'myCanvas'）。
VaRのCTX = c.getContext（ '2D'）;
VAR MW = c.width = 300;
VAR mHの= c.height = 300;
線幅= 5でした。
VaRのR =ミリワット/ 2; //中間位置
VaRのCR = R - 4 *線幅; //半径
VAR startAngleの= - （1/2 *にMath.PI）; //角度を開始
VAR endAngle = startAngleの+ 2 *にMath.PI; //終了角度
VaRのxAngle = 1 *（にMath.PI / 180）; //オフセット角度量
varのfontSize = 35; //フォントサイズ
VAR tmpAngle = startAngleの; //一時変数角度
//レンダリング機能
た円=関数（）{
IF（tmpAngle> = endAngle）{
返します。
}そうであれば（tmpAngle + xAngle> endAngle）{
tmpAngle = endAngle。
}他{
tmpAngle + = xAngle。
}
ctx.clearRect（0、0、MW、MH）。
//円
ctx.beginPath（）;
ctx.lineWidth =線幅;
ctx.strokeStyle = '＃の1c86d1';
ctx.arc（R、R、CR、startAngleの、tmpAngle）。
ctx.stroke（）;
ctx.closePath（）;
//書き込み
ctx.fillStyle = '＃の1d89d5';
ctx.font =のfontSize + 'PX微軟雅黒';
ctx.textAlignは= '中央';
ctx.fillText（恐らくMath.round（（tmpAngle - startAngleの）/（endAngle - startAngleの）* 100）+ '％'、R、R +のfontSize / 2）。
requestAnimationFrameの（rander）。
}。
rander（）;
</ SCRIPT>
</ BODY>
</ HTML>