Canvas教程(12)——三次贝塞尔曲线

bezierCurveTo()方法

绘制三次贝塞尔曲线代码如下。

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

这个方法可谓是绘制波浪线的神器。根据之前的结论，n阶贝塞尔曲线就有n-1个控制点，所以三次贝塞尔曲线有1个起始点、1个终止点、2个控制点。因此传入的6个参数分别为控制点cp1 (cp1x, cp1y)，控制点cp2 (cp2x, cp2y)，与终止点 (x, y)。

这个方法也是不用大家去掌握参数具体是怎么填的，只要知道参数的意义就行。和quadraticCurveTo()方法一样，bezierCurveTo()的三次贝塞尔曲线网上也能找到互动的网页工具。这里提供一个网页：Canvas Bézier Curve Example，大家可以动手试一下。

三次贝塞尔曲线交互工具

绘制XP壁纸

这里我们拿XP的壁纸开刀，来练习一下我们之前学习过的绘制方法。

    
    
    



    
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    

演示 12-1

运行结果：

仿XP壁纸

是不是很萌？是不是非常的酷！这个案例几乎用到了之前所传授给你们的所有武功——三次贝塞尔曲线，径向渐变，线性渐变，绘制圆弧等等。分开写了三个函数，一个绘制草原、一个绘制蓝天、一个绘制白云……大家尝试自己实现一下，当做一次阶段性复习~

保存和恢复Canvas状态

这里还使用到了两个新方法save()和restore()。之前说过了canvas是基于状态的绘制（说了好多次，感觉自己好啰嗦）。保存（推送）当前状态到堆栈，调用以下函数。

context.save();

调出最后存储的堆栈恢复画布，使用以下函数。

context.restore();

---

不知道大家壁纸绘制的如何，肯定非常的酷有没有？到此为止路径的知识和填充样式我们已经全部讲完了，大家也画出了很多或优美、或抽象的艺术作品。不管怎么样，这是属于我们的艺术，我们继续前进！

---

如果您喜欢本书，请使用支付宝扫描下面的二维码捐助作者。

二维码

谢谢您的支持！也欢迎您订阅本书。

如果书中有疏漏或错误之处，敬请您指出，期待您的pull request。如果有任何疑问也可以发送issue。

本人邮箱：[email protected]

本人博客：http://ursb.me

本书地址：http://airingursb.gitbooks.io/canvas

本书github：http://github.com/airingursb/canvas

Canvas--Draw on the Web