开发者值得关注的HTML5新特性Canvas-技术开发专区

开发者值得关注的HTML5新特性Canvas

作者：廖煜爃编辑：胡铭娅 2011-11-09 00:05 IT168网站原创

　　接下来，我们学习如何画贝塞尔曲线。HTML 5的API中，有一个画这个曲线的很容易的方法bezierCurveTo，相关参数介绍如下：

　　bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)：为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候，当前的位置为 (x, y)。下面是相关代码：

context.lineWidth = 20;

　　context.beginPath();

　　context.moveTo(5, 50);

　　context.bezierCurveTo(30, 30, 130, 530, 200, 100);

　　context.stroke();

　　绘画的图形如下图：

如何画贝塞尔曲线
▲

　　由于有了贝塞尔曲线功能的，因此可以绘制很多不同的图形了，比如下面的代码绘制出一个简单的笑脸图。

　// 绘画脸部轮廓

　　context.beginPath();

　　context.lineWidth = 10;

　　context.strokeStyle = “rgb(0, 0, 0)”;

　　context.arc(200, 233, 150, 0, 2 * Math.PI, true);

　　context.stroke();

　　// 填充面部颜色

　　context.beginPath();

　　context.fillStyle = “rgba(80, 100, 80, 0.4)”;

　　context.arc(200, 233, 150, 0, 2 * Math.PI, true);

　　context.fill();

　　// 绘制右眼

　　context.lineWidth = 20;

　　context.beginPath();

　　context.moveTo(230, 130);

　　context.bezierCurveTo(230, 130, 230, 130, 240, 200);

　　context.stroke();

　　// 绘制左眼

　　context.beginPath();

　　context.moveTo(170, 130);

　　context.bezierCurveTo(170, 130, 170, 130, 160, 200);

　　context.stroke();

　　// 绘制上唇

　　context.beginPath();

　　context.moveTo(100, 230);

　　context.bezierCurveTo(100, 230, 200, 380, 300, 230);

　　context.stroke();

　　// 绘制下唇

　　context.beginPath();

　　context.moveTo(100, 235);

　　context.bezierCurveTo(105, 270, 200, 480, 300, 232);

　　context.stroke();

　　显示结果如下图：

如何画贝塞尔曲线
▲

　　目前为止，我们使用的fillStyle都是使用一种单独的颜色去填充图形，而实际上，fillStyle也支持使用多种颜色去填充，比如下面的例子，随机生成了各种颜色去填充画布实现了彩虹的效果：

第1页：走近Canvas元素标签和和SVG的关系第2页：Canvas和硬件加速和Canvas 2D API 第3页：如何绘制圆弧及勾画圆形第4页：如何画贝塞尔曲线第5页：fillStyle颜色填充及渐变效果

关注我们