HTML5技术

canvas基础学习(三) - 古月枫(2)

字号+ 作者:H5之家 来源:博客园 2015-12-08 14:31 我要评论( )

代码如上,逻辑就是在指定的ele元素上,创建一个canvas标签,高宽同ele元素,在这个画布上绘制雪花、彩带或者星星图片,根据动画函数requestAnimationFrame函数以及预先定义好的x,y轴方向的速度,进行一帧一帧的绘

代码如上,逻辑就是在指定的ele元素上,创建一个canvas标签,高宽同ele元素,在这个画布上绘制雪花、彩带或者星星图片,根据动画函数requestAnimationFrame函数以及预先定义好的x,y轴方向的速度,进行一帧一帧的绘制,每一帧的x,y坐标发生变化,进行产生动画效果。星星的图片为

调用方式如下:

1、星星

window.canvasEffect({ ele : document.getElementsByTagName("body")[0] , type : "star" , particleMax : 300 , particleCount : 150 , vy : 0.3 , vyFloat : 0.3 , vx : 0.3 , vxFloat : 0.6 , o : 0.3 , oFloat : 0.3 , });

效果图为:

 

2、彩带

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTTP协议学习随笔 - 糖醋酸辣椒

    HTTP协议学习随笔 - 糖醋酸辣椒

    2017-05-01 18:03

  • vue全局配置----小白基础篇 - 星光笔

    vue全局配置----小白基础篇 - 星光笔

    2017-04-28 08:04

  • 【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖湾

    【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖

    2017-04-16 18:00

  • canvas知识点 - H.U.C-王子

    canvas知识点 - H.U.C-王子

    2017-04-16 10:02

网友点评