canvas+js実現円進捗バー

学習ノート:
canvasには、パス、長方形、円形、文字、および画像を追加する方法がいくつかあります.canvas要素自体は図面を描く能力がなく、図面を描く容器と見なすことができます.すべての描画作業はJavaScript内部で行わなければならない:getContext(「2 d」)オブジェクトは内蔵HTML 5オブジェクトであり、パス、矩形、円形、文字、画像の追加方法が複数ある.
1.canvas図面フロー

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

2.canvas円関数の具体的な解釈
【円を描く、Math.PI関数の適用.cxt.arc(100100,30,0,Math.PI*2,true);カッコ内の1番目と2番目のパラメータは、円心座標を表します.3番目のパラメータは円の半径です.4番目のパラメータは円周の開始位置を表します.0 PIは開始位置です.時計回りのルートに沿って、それぞれ0.5 PI(真下)、1 PIと1.5 PI(真上)です.、絵餅図に扇形範囲の根拠を提供した.5番目のパラメータは弧長Mathです.PI*2は円全体ですPIは半円です.6番目のパラメータはブール値で、trueは反時計回りfalseは時計回りです.
構文:arc(中心点、半径、開始角度、終了角度、および描画方向を定義する:時計回りまたは反時計回り)
角度の問題については、水平右側が0,0.5 PIで下向き90度(真下)、-0.5 PIで上向き90度(真上)です.円の成形は弧長ではなく、開始角度と終了角度の間の連線で計算されます.
3.Math.round()

round()         ：       +0.5  ，    ，  ：round(3.4)  3.4+0.5=3.9，     3，  round(3.4)=3;   round(-10.5)  -10.5+0.5=-10，      -10，  round(-10.5)=-10

4.stroke()関数
ctx.stroke();関数を描画して表示
5.

JavaScript Math.Ceil()関数--数値パラメータ以上の最小整数(整数関数)を返し、数値を

に丸めます.

JavaScript Math.floor()関数--数値パラメータ以下の最大整数(整数関数)を返し、数値を

に丸めます.
ソースコードは次のとおりです.







window.onload=function(){
//canvas init
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var W=canvas.width;
var H=canvas.height;
//variables
var degrees=0;
var new_degrees=0;
var diff=0;
var color="lightgreen";
var bgcolor="#222";
var text;
var animation_loop,redraw_loop;
function init(){
//clean the canvas everytime a chart is drawn
ctx.clearRect(0,0,W,H);
//background 360 degree arc
ctx.beginPath();
ctx.strokeStyle=bgcolor;
ctx.lineWidth=30;
ctx.arc(W/2,H/2,100,0,Math.PI*2,false);
ctx.stroke();
//Math.PI=180du
var radians=degrees*Math.PI/180;
ctx.beginPath();
ctx.strokeStyle=color;
ctx.lineWidth=30;
ctx.arc(W/2,H/2,100,0-90*Math.PI/180,radians-Math.PI/180,false);//円全体が2 PI
ctx.stroke();
//let us add text
ctx.fillStyle=color;
ctx.font="50px bebas";
text=Math.floor(degrees/360*100)+"%";
text_width=ctx.measureText(text).width;
ctx.fillText(text,W/2-text_width/2,H/2+15);
}
function draw()
{
if(typeof animation_loop!=undefined)
  clearInterval(animation_loop);
new_degrees=Math.round(Math.random()*360);
var diff=new_degrees-degrees;
animation_loop=setInterval(animate_to,1000/diff);
}
//animation for fun
function animate_to()
{
if(degrees   degrees++;
else
degrees--;
   if(degrees==new_degrees)
  clearInterval(animation_loop);
init();
}
draw();
redraw_loop=setInterval(draw,2000);
}