html5-canvas3-二次贝塞尔曲线和三次贝塞尔曲线以及canvas的渐变

来源:互联网 发布:安卓仿淘宝商品详情 编辑:程序博客网 时间:2024/05/17 03:33

以前不知道二次贝塞尔曲线和三次贝塞尔曲线,学习canvas时,canvas提供了两个方法来绘制这两条陌生的线。偶也是初次了解,不知道什么地方将来会用到,先分享了再说:

和以前一样,先建个canvas标签:


接下来又开始了我们的脚本的编写:


配上结果图:


上图就是canvas画的平滑曲线.

接下来分享一下canvas的渐变的效果,类似css的渐变,只不过是canvas自身带的而已:
在上面的基础上,我们再在脚本里面添加一个drawGradients()方法,来展示canvas的渐变效果。


结果图:


可以用在canvas上添加几个字,顺便也让字体渐变效果,那我们再在脚本里面添加个drawText()方法:


配上效果图:


再加一幅放射性渐变的效果图:


(此次分享的需要注意的地方代码处都有明显的注释,所以代码外就不多啰嗦了,)

                   待续。。。。。。canvas

0 0
原创粉丝点击