canvas绘制四分之一圆_html5Canvas画圆

html5Canvas画圆

首先来理解下弧度制，以下内容摘自百度百科。

用弧长与半径之比度量对应圆心角角度的方式，叫做弧度制，用符号rad表示，读作弧度。等于半径长的圆弧所对的圆心角叫做1弧度的角。由于圆弧长短与圆半径之比，不因为圆的大小而改变，所以弧度数也是一个与圆的半径无关的量。角度以弧度给出时，通常不写弧度单位。另外一种常用的度量角的方法是角度制。弧度制的精髓就在于统一了度量弧与角的单位，从而大大简化了有关公式及运算，尤其在高等数学中，其优点就格外明显。---《百度百科》

HTML5中canvas画曲线的函数有4个，分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.其中最简单的是arc，

arc可以画一个完整的圆，也可以画一段弧线。

arc的函数如下，arc(x, y, radius, startAngle, endAngle, anticlockwise)，参数意义分别为

圆心x、圆心y、半径、开始的角度、结束的角度、是否逆时针，这里的角度就是采用弧度制。

先上个源码画一个标准的圆，代码如下

gf

canvas{

display: block;

margin: 50px auto;

box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;

}

var c = document.getElementById("mycanvas");

var context = c.getContext('2d');

context.arc(195,150,7