html5 canvas之绘制曲线
html5 canvas 提供了绘制一系列曲线的函数。如下：
1、如果我们需绘制更加复杂的曲线路径，我们或许该用到贝塞尔或者2次方程曲线。
quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
两种曲线有何区别？我们可以参看一下右边这张图，2种曲线都有一个起点和终点（blue point），但是贝塞尔曲线仅有一个“control point”（red point），2次曲线则有2个。
两个方法中的x和y参数都为曲线的终点坐标，cp1x和cp1y为第一control point的坐标，cp2x和cp2y为2次曲线的第二控制点。
熟 练运用2次曲线和贝塞尔曲线进行路径绘制，是一件蛮有挑战性的工作，因为它不像某些矢量绘图软件，比如ADOBE Illustrator等具有直观的视觉反馈，所以这使得我们在绘制一些复杂的曲线时会遇到一点小困难，不过如果你有耐心和时间的话，你肯定能绘制出许多 复杂的曲线来。
二次曲线示例：
// Quadratric curves example ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke();
贝塞尔曲线示例：
// Bezier curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();
2、如果要创建一个弧形的画布，我们可以使用 arc() 方法。
语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)
代码：
- context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
HTML5 Canvas Arc 例子：
<!DOCTYPE HTML>
<html>
<head>
<title>html5 canvas Arc</title>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 288;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();
};
</script>
</head>
<body>
<canvasid="myCanvas"width="578"height="200">
</canvas>
</body>
</html>
HTML5 Canvas Arc 说明：
看看上图中的外观 。弧没有超过部分的一个假想的圆的周长 。这个虚构的循环可以被定义centerX，centerY，和半径。
接下来，我们可以定义沿所定义的虚圆的周长有两个点的弧本身startingAngle和endingAngle。这两个角度定义的弧度和形式来自圆心和虚线相交的弧线，我们希望创建两端。
弧方法的最后一个参数是逆时针，这是一个可选的参数，它定义的两个结束点之间的 ARC路径的方向。除非另有规定，这种说法是默认为false，这将导致顺时针要绘制弧。
