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，這將導致順時針要繪制弧。