繪製平滑的多條曲線。文件名：drawing3.html。
第二個for循環略過第一個和最後一個點。再循環中創建一個新的控制點，其x , y值分別設置爲循環中當前點和後續點的座標的平均值。繼而繪製一條穿過當前點並以控制點結尾的曲線，重複直至循環結束，循環結束時，索引指向倒數第二個點，繪製一條曲線穿過它到達最後一個點。得到一條平滑的曲線。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>繪製3</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),
points = [],
numPoints = 9,
ctrlPoint = {};
for(var i=0;i<numPoints;i++){
points.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height
});
}
context.beginPath();
context.moveTo(points[0].x,points[0].y);
for(i = 1;i<numPoints-2;i++){
ctrlPoint.x = (points[i].x + points[i+1].x)/2;
ctrlPoint.y = (points[i].y + points[i+1].y)/2;
context.quadraticCurveTo(points[i].x,points[i].y,ctrlPoint.x,ctrlPoint.y);
}
context.quadraticCurveTo(points[i].x,points[i].y,points[i+1].x,points[i+1].y);
context.stroke();
}
</script>
</body>
</html>效果圖：
略微變化一下，得到閉合的曲線：文件名：drawing4.html。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>繪製4</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),
points = [],
numPoints = 9,
ctrlPoint = {},
ctrlPoint1 = {};
for(var i=0;i<numPoints;i++){
points.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height
});
}
ctrlPoint1.x = (points[0].x + points[numPoints-1].x)/2;
ctrlPoint1.y = (points[0].y + points[numPoints-1].y)/2;
context.beginPath();
context.moveTo(ctrlPoint1.x,ctrlPoint1.y);
for(i = 0;i<numPoints-1;i++){
ctrlPoint.x = (points[i].x + points[i+1].x)/2;
ctrlPoint.y = (points[i].y + points[i+1].y)/2;
context.quadraticCurveTo(points[i].x,points[i].y,ctrlPoint.x,ctrlPoint.y);
}
context.quadraticCurveTo(points[i].x,points[i].y,ctrlPoint1.x,ctrlPoint1.y);
context.stroke();
}
</script>
</body>
</html>效果圖：
參見《HTML5+Javascript》動畫基礎。