绘制平滑的多条曲线。文件名：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》动画基础。