Canvas本身已经给我们提供了一些基本的操作方法，如画矩形、圆形，我在上一篇中也有介绍过通过《通过 Canvas 的 moveTo() 和 lineTo() 绘制一个简单的三角形》。而在本篇中我想跟大家分享下Canvas 里的贝塞尔曲线。

贝塞尔曲线

贝塞尔曲线很有用，可以用来描绘复杂有规律的图形。有两种形式的贝塞尔曲线：二次贝塞尔曲线和三次贝塞尔曲线。二次贝塞尔曲线quadraticCurveTo(cp1x, cp1y, x, y)有一个控制点，三次贝塞尔曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)有两个控制点，下面我们就来看看这两个方法里的参数都是什么含义，以及如果把他们用到实际中。右边这个图就很好的体现了二次贝塞尔曲线和三次贝塞尔曲线的开始、结束点（蓝色）以及控制点（红色），以及他们之间的区别。

二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。

二次贝塞尔曲线例子

HTML代码

<canvas width=800 height=600 id="canvas"></canvas>

JavaScript代码

window.onload = function(){   var canvas = document.getElementById('canvas');   if (canvas.getContext) {     var ctx = canvas.getContext('2d');     ctx.beginPath();     ctx.moveTo(50,46);     ctx.quadraticCurveTo(30,50,30,100);     ctx.quadraticCurveTo(30,110,50,113);     ctx.quadraticCurveTo(20,150,60,113);     ctx.quadraticCurveTo(60,118,125,110);     ctx.quadraticCurveTo(148,110,150,62.5);     ctx.quadraticCurveTo(145,25,50,46);     ctx.stroke();     ctx.font="18px Arial";     ctx.fillStyle="#09577E";     ctx.fillText("yunkus.com",43,80);   } }

为了让canvas有更大的空间，在这里把canvas设置为宽800，高600。效果如下：

三次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。

HTML代码

<canvas width=800 height=600 id="canvas"></canvas>

Javascript代码

window.onload = function(){   var canvas = document.getElementById('canvas');   if (canvas.getContext) {     var ctx = canvas.getContext('2d');     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);     // 渐变     var my_gradient=ctx.createLinearGradient(0,0,170,0);     my_gradient.addColorStop(0,"white");     my_gradient.addColorStop(0.5,"red");     my_gradient.addColorStop(1,"white");     ctx.fillStyle="#0000ff";     ctx.fillStyle = my_gradient;     ctx.fill();   } }

为了让canvas有更大的空间，在这里把canvas设置为宽800，高600。效果图：

在这本篇中为了让心开看起来更美，我们在这里给他一个渐变色，但是在这里暂时不讨论渐变。三次贝塞尔曲线的操作方法跟二次贝塞尔曲线的操作方法差不多。在这里也不作详细的介绍了，也没什么好讲的，只要你多用，很快就可以上手了。用这个贝塞尔曲线没什么技术含量，只是如果你想用他来画一些好看的图，那就真的要考验你的技术了。Canvas 的学习之路还很长，慢慢来，一步一个脚印！