canvas基础--圆

绘制圆与绘制矩形的步骤基本一样：
以一个小案例示范吧：
```
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext('2d');
// 前两个参数为圆心的坐标，第三个参数：半径，第四个：开始角度，第五个：圆结束角度
//，第六个参数：是否逆时针(true为逆时针，false为顺时针);
context.beginPath();
context.fillStyle = "white";
context.arc(120, 100, 50, 0, Math.PI * 2, false);
context.fill();
context.beginPath();
context.fillStyle = "orange";
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.fill();
```
效果图：


根据上述效果，我们可以来画一个太极图：
```
        context.beginPath();
context.fillStyle = "black";
context.arc(200, 200, 50, 0, Math.PI * 2, false);
context.fill();


context.beginPath();
context.fillStyle = "white";
context.arc(200, 200, 50, -(Math.PI / 2), Math.PI / 2, false);
context.fill();


context.beginPath();
context.fillStyle = "black";
context.arc(200, 175, 25, 0, Math.PI * 2, false);
context.fill();


context.beginPath();
context.fillStyle = "white";
context.arc(200, 225, 25, 0, Math.PI * 2, false);
context.fill();


context.beginPath();
context.fillStyle = "white";
context.arc(200, 175, 5, 0, Math.PI * 2, false);
context.fill();


context.beginPath();
context.fillStyle = "black";
context.arc(200, 225, 5, 0, Math.PI * 2, false);
context.fill();
```
效果图：
接下来就要增加一定的难度了，绘制**环形进度条**：
###### 注意：一定要给<canvas>80%</canvas>标签一个innerHTML（设置百分数，例如：80%），否则，无法展示动态效果。
* 封装函数画圆:
```
function draw(percent){
//外框圆
context.beginPath();
context.arc(50,50,45,0,Math.PI*2);
context.strokeStyle = "rgb(245,245,245)";
context.stroke();

//进度圆
context.beginPath();
var per = 2*Math.PI/100*percent;
context.arc(50,50,40,0,per);
context.lineWidth = 8;
var gradient = context.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,"blue");
gradient.addColorStop(0.5,"pink");
gradient.addColorStop(1,"yellow");
context.strokeStyle = gradient;
context.stroke();
}
```


在圆的内部添加数字，帮助我们看进度：
```
function drawText(text){
context.beginPath();
context.fillStyle = "#0000FF";
context.font = "20px Arial";
context.textBaseline = "middle";
context.textAlign = "center";
context.fillText(text,50,50);
}
```
添加计时器，以便我们能看到画圆的效果：
```
        var start = 0;
var timer =  setInterval(function(){
    //清空画布
    context.clearRect(0,0,myCanvas.width,myCanvas.height);
var percentText = myCanvas.innerHTML;
//去除空格
percentText = percentText.trim();
//去掉%
percentText =percentText.substr(0,percentText.length-1);
start++;
//~~将字符串转化为number类型
if(start>=~~percentText){
    start =~~percentText;
clearInterval(timer);
}
console.log(typeof ~~percentText);
draw(start);
drawText(start + "%");
},100);
```
最后效果：(格式问题，就只有图片，不上传视频了)