栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript > canvas教程

Canvas 三次贝塞尔曲线 · Canvas动画教程

canvas教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Cp2 三次贝塞尔曲线

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的壁纸开刀,来练习一下我们之前学习过的绘制方法。




    
    XP壁纸
    
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    


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

演示 12-1

运行结果:


仿XP壁纸

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

保存和恢复Canvas状态

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

context.save();

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

context.restore();

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/10636.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号