什么是Canvas？
HTML5的canvas元素使用JavaScript在网页上绘制图像。 javascript
画布是一个矩形区域，可以控制每个像素。 css
canvas提供了多种添加路径、矩形、圆、文字和图像的方法。 html
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome和Safari支持标签。 java
ps:Internet Explorer 8之前的版本不支持标签。 canvas
理解坐标
“canvas”使用画布的x和y坐标来定位画布上的绘画。 画布的左上角是坐标的原点(0，0 )。 api
canvas坐标以下：浏览器
用于在Canvas中绘制圆的javascript api函数是arc(x，y，radius，startAngle，endAngle，anticlockwise ) Boolean )； 函数
参数说明：ui
x、y是圆的中心坐标，htm
radius是圆的半径，
开始角度圆的开始角度为、
endAngle圆的终点角度为、
默认情况下，绘制antiClockwise圆的顺序为顺时针方向，如果为true，则为逆时针方向。 这只是内部描绘的顺序不同，显示的效果是一样的。
例如，如果要绘制一个完整的圆，请使用：canvas.arc(50、50、25、0、2*math.pi )；
可以根据某个值动态绘制圆弧的长度。 动态设定圆的结束角度就可以了。 根据某个百分比数据画出统计某个数据的圆弧，假设满意度为50%，圆的结束角度为0.5*2*Math.PI .可以画出半圆。
canvas画圆*{margin:0； 垫：0； }
#canvas-box{width:980px； 边距：50 px自动； }
#percent{color:#C00； }
# canvas { border :1 px solid # 900； 边距：0自动0自动； }
50 % varp=document.getelementbyid (' percent ' ).innerHTML；
p=p/100；
var canvas=document.getelementbyid (canvas ) ).getcontext ) ) 2d )；
canvas.beginPath (；
canvas.arc (200、200、100、0、2 * math.pi )；
canvas.strokeStyle='#f00 '；
canvas.lineWidth=2；
canvas.stroke (；
canvas.closePath (；
canvas.beginPath (；
canvas.arc (50、50、50、0、p*2*Math.PI )；
canvas.strokeStyle='#00f '；
canvas.lineWidth=2；
canvas.stroke (；
canvas.closePath (；