您的位置:首页 > Web前端 > HTML5

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

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

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



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





配上结果图:



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

接下来分享一下canvas的渐变的效果,类似css的渐变,只不过是canvas自身带的而已:

在上面的基础上,我们再在脚本里面添加一个drawGradients()方法,来展示canvas的渐变效果。



结果图:



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



配上效果图:



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



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

                   待续。。。。。。canvas
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  canvas html5 html5 canvas