一、甚忙,短言之最近谷歌那谁谁因为自己的相好被老大抢了,就去小米了!狗血的三角关系要比烂掉的TVB神剧好看多了。 但这只是小菜,贝塞尔曲线才是很角色,因为有外国血统,因此,和CSS3动画、SVG以及canvas都有基情,基情绽放如盛夏的菊花。 然而,有基情好啊,搞在一起就可以一锅端了,不是有这么一首歌嘛~ 互撸娃,互撸娃,一根藤上七朵花; 连根一拔,全死啦!啦~啦啦啦…… so, 如此一锅端的好戏怎能错过呢! 二、认识主角——贝塞尔考考你,下面哪个贝塞尔是“贝塞尔曲线”的那个贝塞尔?只有一次机会哦!(点击选择) 回答正确!!
三、贝塞尔曲线作用贝塞尔曲线作用:曲线、画曲线、画美女曲线、规律可循地画美女曲线。由于有此特性,所以被SVG, Canvas, CSS3等宠幸,搞基从此开始。 四、如何用贝塞尔曲线画曲线如果给你一个点,你能做什么? 如果给你两个点,你能做什么? 是条件不足的。 一个标准的3次贝塞尔曲线需要 无论SVG, Canvas还是CSS3动画与贝塞尔搞基,都牵扯到这4个点。我们来瞅瞅~~ 五、SVG和贝塞尔曲线的基情史SVG之前有多次介绍,可缩放矢量图形(Scalable Vector Graphics)、二维、XML标记,类似下面: <svg width="160px" height="160px"> <path d="M10 80 ..." /> </svg> 本质就是HTML类似东西。 对于设计狮,也是可以把玩SVG的,可以在线绘制,或者在Illustrator中绘制并导出。 SVG的代码不具体展开(说开了可以连载好几篇),提一下其中一个 三次贝塞尔曲线指令: 看看下面一些描述贝塞尔曲线的代码(片段),大家可以好好地感受下(其中字母 <svg width="190px" height="160px"> <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/> <path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/> <path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/> <path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/> <path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/> <path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/> <path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/> <path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/> <path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/> </svg> 曲线效果类似下面这张图: 可以看到 六、Canvas与贝塞尔曲线的基情史Canvas之前也介绍过,HTML 画布元素,脚本化客户端绘图。 其中Canvas有个 代码走起: var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke(); 开始点:moveTo(20,20) 控制点 1:bezierCurveTo(20,100,200,100,200,20) 控制点 2:bezierCurveTo(20,100,200,100,200,20) 结束点: bezierCurveTo(20,100,200,100,200,20) 对比SVG代码,大家有木有发现,本质上都是一个德行——有个 七、CSS3动画与贝塞尔曲线的基情史贝塞尔曲线决定了CS3S动画那个那个的节奏~ 是先快后慢呢,还是先慢后快~~ 为了更好地搞基,CSS3还专门留了个VIP属性,叫做 具体用法类似: transition:cubic-bezier(.25,.1,.25,1) 其中 有专门的页面让大家感受CSS3动画如何与贝塞尔曲线搞基的,点击这里走起: 以上链接是个非常好的工具,大家想要什么效果,可以自己调整,然后copy 有人会疑问,CSS3动画那个 那是因为CSS3动画贝塞尔曲线的起点和终点已经固定了,分别是 八、搞基史大集合CSS3似乎稍稍不同步,于是,我们稍作调整,来个完美同频率共振开天辟地无敌大搞基:
其中,完全一致的, 于是,三者与贝塞尔曲线完美搞基了!撒花,放鞭炮~~ 九、结语以及参考内容与我们实际接触更多应该是CSS3的贝塞尔曲线,撸一遍就发现贝塞尔曲线其实就是那么个回事,多一点感性直观认识,处理问题就更加得心应手了,希望本文内容能够对您的学习有所帮助。 参考文章: |
|
来自: JhouShuai > 《贝赛尔曲线(Bezier)》