请选择 进入手机版 | 继续访问电脑版
查看: 3910|回复: 141

[新手教程] html5 canvas文字动态粒子效果

  [复制链接]
最佳答案
0 
guofinni 发表于 2016-12-29 14:04:24 | 显示全部楼层 |阅读模式

功能说明:

  输入字体,按确定后,右侧画布出现字体的动态粒子效果。



效果预览:
QQ截图20161229135441.jpg

QQ截图20161229135429.jpg   
请使用支持canvas的浏览器查看


实现分析:
  利用getImageData写一下粒子效果,
采用了输入即可得的形式,在文本框输入任何内容,可以在画布中得出输入内容的粒子效果。由于前面两篇文章已经把粒子效果的实现原理阐述得比较清楚,因此这里就不再重新详述,只说说实现时的几个要点。

  1.如何生成3D坐标下随机方向的速度。

  在2D坐标下,如果需要生成一个随机方向的速度,方法很简单,我们可以获取一个随机角度,并且根据该角度把速度分别投影在xy轴下即可。但是如果在3D坐标下如何生成随机方向的速度呢?其实也可以使用相似的原理,我们需要两个随机角度(a1,a2),一个角度用于Z轴的投影,另一个用于x或y轴的投影。那么投影在z轴方向的速度为:Vz=V*sin(a1),投影在xy平面的速度分量为:Vxy=V*cos(a1),再根据该分量得出,投影在x轴的分量为:Vx=Vxy*cos(a2),y轴分量为:Vx=Vxy*sin(a2),代码如下:
               
  1. var zSpeed=this.speed*Math.sin(this.angleZ);
  2.                 var xySpeed=this.speed*Math.cos(this.angleZ);
  3.                 var xSpeed=xySpeed*Math.cos(this.angleX);
  4.                 var ySpeed=-xySpeed*Math.sin(this.angleX);
复制代码

  2.如何使随机分布的粒子组成字母。
  首先通过getImageData获取字体每个像素点得信息,并创建每个点对象,保存它们的位置和颜色,透明度等信息。然后在初始化时使粒子分布在随机位置上,需要组成文字的时候,使点对象快速从现在的位置移动到之前保存的位置上。

  3.如何使点受Z轴坐标的影响。
  Z轴坐标通过点的位置,尺寸体现,因此具体实现是首先通过点的z轴计算出该点缩放的比例,然后根据该比例重新计算点的位置和尺寸。
  1. resetOnZValue:function(pos,radius){
  2.             var z=pos[2];
  3.             var halfWidth=center[0];
  4.             var scale=(halfWidth+z)/halfWidth;
  5.             var newPos=[];
  6.             var newRadius;
  7.             newPos[0]=center[0]+(pos[0]-center[0])*scale;//计算受z轴影响后小球的位置值和尺寸
  8.             newPos[1]=center[1]-(center[1]-pos[1])*scale;
  9.             newPos[2]=z;
  10.             newRadius=radius*scale;
  11.             return [newPos,newRadius];//返回小球受X轴影响后新的坐标和尺寸
  12.         },
复制代码
  完整demo请回复下载!
游客,如果您要查看本帖隐藏内容请回复






最佳答案
0 
zaqxswcde 发表于 2016-12-29 17:30:58 | 显示全部楼层
66666666666
最佳答案
0 
安开图 发表于 2016-12-30 12:38:16 | 显示全部楼层
html5 canvas文字动态粒子效果
最佳答案
0 
zhangtinglei 发表于 2016-12-30 17:01:17 | 显示全部楼层
最佳答案
0 
格式 发表于 2016-12-30 21:17:37 | 显示全部楼层
测试下看看
最佳答案
0 
zyuq123 发表于 2016-12-30 21:59:45 | 显示全部楼层
很好的帖子,看看学习啦
最佳答案
0 
马啃菠萝 发表于 2016-12-31 02:59:35 | 显示全部楼层
好厉害的样子!~
最佳答案
0 
zhoujki 发表于 2016-12-31 16:45:43 | 显示全部楼层
6666666666666666666
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表