前端 圆形进度图_canvas+js实现圆圈进度条

学习笔记：

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有绘图能力的,可以看成一个画图的容器。所有的绘制工作必须在 JavaScript 内部完成：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.

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(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数，代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线，分别是0.5 PI(正下方)，1 PI和1.5 PI(正上方)，为画饼图提供了扇形范围的依据。 第五个参数是弧长Math.PI*2就是整个圆，Math.PI是半圆。第六个参数是一个布尔值，true是逆时针false是顺时针。】

语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)

关于角度问题：水平靠右是0,0.5PI是向下90度(正下方)，-0.5PI是向上90度