这节主讲 Canvas 绘制贝塞尔曲线，首先我们要了解 什么是贝塞尔曲线？
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线， 是应用于二维图形应用程序的数学曲线。
一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop 等。在Flash4 中还没有完整的曲线工具，而在Flash5 里面已经提供出贝塞尔曲线工具。
贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre
Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。
啊，行了！视力不好就不要继续往下读了，来看图片吧！
一次贝塞尔曲线：
简单说就是一条直线。
二次贝塞尔曲线：
解释图：
红色的曲线才是形成的贝塞尔曲线。
三次贝赛尔曲线：
解释图：
红色的曲线才是贝塞尔曲线，可以看到它的弧度跟三条直线有关。
我这么通俗的解释应该都看懂了，让我们瞧瞧 Canvas 是如何绘制贝塞尔曲线的。
绘制二次贝塞尔曲线：
quadraticCurveTo(cp1x, cp1y, x, y):
参数1 和 2 控制： 控制点坐标；
参数3 和 4 控制： 终点坐标。
我们来做一个小小的案例：
<html>
<head>
<title>Canvas 基础</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//开始代码draw();
ctx.beginPath();
ctx.moveTo(10,200);//起始点
var cp1x =40, cp1y =100;//控制点
var x =200, y =200;// 结束点
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.stroke();
ctx.beginPath();
ctx.rect(10,200,10,10);
ctx.rect(cp1x, cp1y,10,10);
ctx.rect(x, y,10,10);
ctx.fill();
}()
</script>
</html>
通过我们的仔细观察，不难看出，起点、终点固定，曲线的弧度完全是由控制点决定的，如图：
聪明如你，我们来看三次贝塞尔曲线：
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
参数1 和 2 控制： 控制点坐标；
参数3 和 4 控制： 控制点2的坐标；
参数5 和 6 控制： 终点的坐标。
结合案例：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//开始代码draw();
ctx.beginPath();
ctx.moveTo(40,200);//起始点
var cp1x =20, cp1y =100;//控制点1
var cp2x =100, cp2y =120;//控制点2
var x =200, y =200;// 结束点
//绘制三次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
ctx.beginPath();
ctx.rect(40,200,10,10);
ctx.rect(cp1x, cp1y,10,10);
ctx.rect(cp2x, cp2y,10,10);
ctx.rect(x, y,10,10);
ctx.fill();
}()
</script>
</html>
看下控制点2的效果：
给贝塞尔曲线染色：
fillStyle = color 设置图形的填充颜色;
strokeStyle = color 设置图形轮廓的颜色。
注：
1.color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。
2.默认情况下，线条和填充颜色都是黑色。
3.一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或strokeStyle 的值。
就比如：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//开始代码draw();
for(var i =0; i <6; i++){
for(var j =0; j <6; j++){
ctx.fillStyle ='rgb('+ Math.floor(255-42.5* i)+',0,'+ Math.floor(255-42.5* j)+')';
ctx.fillRect(j *50, i *50,50,50);
}
}
}()
</script>
</html>
效果图如下：
渐变的颜色块，好看吗？
我们来做一个更有趣的！假设这些块快颜色是随机的，就好像：
那你得这样：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//开始代码draw();
for(var i =0; i <6; i++){
for(var j =0; j <6; j++){
ctx.strokeStyle =`rgb(${
randomInt(0,255)},${
randomInt(0,255)},${
randomInt(0,255)})`;
ctx.strokeRect(j *50, i *50,40,40);
}
}
function randomInt(from, to){
return parseInt(Math.random()*(to -from+1)+from);
}
}()
</script>
</html>
我在底部定义了函数 randomInt 意为随机整数，请不要遗漏了它。
然后我在想，有没有透明属性呢？
当然，rgba 不算吗?
oh no！我指定是 Canvas 透明属性。
transparency( 透 明 度 )
globalAlpha = transparencyValue
这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。
这个知识点并不重要，但直接跳过的话应该不合适吧？
先弄几个小方块出来吧！
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//开始代码draw();
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
}()
</script>
</html>
我们得到了这样三个图案:
加上透明度，就在
在哪都可以，加在不同的地方所起到的影响各不相同
什么？你说看不清代码
问我要啊！代码又不要钱
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//开始代码draw();
ctx.globalAlpha=0.2;
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
}()
</script>
</html>
所以我们很容易就看出了：
当透明度放在顶部时，影响全局，对整张 Canvas 画布生效；
当透明度放在某一块儿元素之下时，仅对其及以下元素生效，对其之前的元素均不生效；
当透明度放在函数尾部时，没有任何意义。代码不是按行收费的，为了优化请删掉它。
Canvas 的路还有很长，别担心我陪你一同度过。如果前 3 章你都看完了，恭喜你已经可以看懂这个了：
“ 链接在此 ”
假设你还参悟不透，那就看看第四章，反正又不要钱！我是 “ 我不是费圆 ”，一个勤快的程序员。
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？
推荐阅读：
Canvas基础教程1
Canvas基础教程2
结尾动画——线条花环