HTML5 — 画弧度代码
<!DOCTYPE html><html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" height="400" width="800"></canvas>
<script>
//定义2d绘图对象，定义角度制到弧度制的转换
var c = document.getElementById('myCanvas').getContext('2d');
//一个工具函数，用于将角度从角度制转化成弧度制
function rads(x) { return x * Math.PI / 180; };
//绘制一个圆形，如果需要椭圆的话则进行相应的缩放和旋转即可
//由于没有当前点，因此绘制的圆形不需要当前点到圆形起点之间的直线
c.beginPath();
//圆心位于(75,100)，半径为50，从0°到360°，顺时针旋转
c.arc(75, 100, 50, 0, rads(360), false);
//绘制一个楔，角度从x轴正向顺时针度量
//要注意的是arc()方法会将当前点和弧形起点用直线相连
//从圆心开始
c.moveTo(200, 100);
//圆心(200,100)，半径50，从角度-60°到0°，顺时针
c.arc(200, 100, 50, rads(-60), rads(0), false);
//将半径添加到圆心
c.closePath();
//同样的楔，但是方向不同
c.moveTo(325, 100);
c.arc(325, 100, 50, rads(-60), rads(0), true);
c.closePath();
//使用arcTo()方法来绘制圆角，绘制一个点(400,50)为左上角同时还带有不同半径角的正方形
//从上边的中点开始
c.moveTo(450, 50);
//添加部分上边和右上角
c.arcTo(500, 50, 500, 150, 30);
//添加右上角和右下角
c.arcTo(500, 150, 400, 150, 20);
//添加底边和左下角
c.arcTo(400, 150, 400, 50, 10);
//添加左边和左下角
c.arcTo(400, 50, 500, 50, 0);
//闭合路径来添加其余的上边
c.closePath();
//二次贝塞尔曲线，一个控制点
//从点(75,250)开始
c.moveTo(75, 250);
//画一条以一直到点(175,250)结束的曲线
c.quadraticCurveTo(100, 200, 175, 250);
//标记控制点(100,200)
c.fillRect(100 - 3, 200 - 3, 6, 6);
//三次贝塞尔曲线
c.moveTo(200, 250);
//画一条以一直到点(300,250)结束的曲线
c.bezierCurveTo(220, 220, 280, 280, 300, 250);
//标记控制点
c.fillRect(220 - 3, 220 - 3, 6, 6);
c.fillRect(280 - 3, 280 - 3, 6, 6);
//定义一些图形属性并绘制曲线
//填充灰色
c.fillStyle = '#aaa';
//5个像素宽的黑色（默认颜色）线段
c.lineWidth = 5;
//填充该曲线
c.fill();
//勾勒外边框
c.stroke();
</script>
</body>
</html>
