Text Particle Systems
来源:互联网 发布:动易cms 编辑:程序博客网 时间:2024/06/04 19:23
一.简介
在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择:
1.Flash制作的文字特效
2.制作一个动态的GIF
3.Javascript+dom+css
4.SVG
二.javascript+Canvas文字特效
这篇我为大家介绍第五种,也是最强大的一种,上面四种都有局限性。
我使用的是javascript+Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大??
因为Canvas支持像素级别操作,它不仅可以宏观上制作一些文字特效,也可以深入实现文字粒子系统特效----Text Particle Systems。
当然Canvas的像素级别操作还广泛用于图片处理等更多领域,在HTML5实验室http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html里也有了好多案例··
三.特效实现
我们现在黑色背景下写一个“心”字:
1
2
3
4
5
6
7
var
tex =
"心"
;
cxt.fillStyle =
"rgba(0,0,0,1)"
;
cxt.fillRect(0, 0, 430, 400);
cxt.fillStyle =
"rgba(255,255,255,1)"
cxt.font =
"bolder 400px 宋体"
;
cxt.textBaseline =
'top'
;
cxt.fillText(tex, 20, 20);
然后我们遍历所有的像素点,并把画上了字的像素点放进一个数组里面:
1
2
3
4
5
6
7
8
for
(y = 1; y < 400; y += 10) {
for
(x = 1; x < 400; x += 10) {
imageData = cxt.getImageData(20 + x, 20 + y, 1, 1);
if
(imageData.data[0] > 170) {
ps.push({ px: 20 + x, py: 20 + y });
}
}
}
然后我们,在每个点上画一个小球,并随机生成X和Y方向的速度:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for
(i
in
ps) {
var
ball = {
x: ps[i].px,
y: ps[i].py,
r: 2,
vx: getRandomNumber(-10, 10),
vy: getRandomNumber(0, 100)
};
balls.push(ball);
}
cxt.fillStyle =
"#fff"
;
for
(i
in
balls) {
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2,
true
);
cxt.closePath();
cxt.fill();
}
我们再模拟一个重力场和非弹性碰撞,加上Jscex 制作动画效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var
dropAsync = eval(Jscex.compile(
"async"
,
function
() {
while
(
true
) {
if
(breakTag) {
break
;
}
cxt.fillStyle =
"rgba(0, 0, 0, .3)"
;
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle =
"#fff"
;
for
(i
in
balls) {
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2,
true
);
cxt.closePath();
cxt.fill();
balls[i].y += balls[i].vy * cyc / 1000;
balls[i].x += balls[i].vx * cyc / 1000;
if
(balls[i].r + balls[i].y >= canvas.height) {
if
(balls[i].vy > 0) {
balls[i].vy *= -0.7;
}
}
else
{
balls[i].vy += a;
}
}
$await(Jscex.Async.sleep(cyc));
}
}))
0 0
- Text Particle Systems
- Unity-Particle Systems
- UE4 Particle Systems
- Unity3d用户手册Particle Systems Particle System Modules40
- Unity3d用户手册用户指南创建游戏Particle Systems
- Text Entry Systems: Mobility, Accessibility, Universality
- Systems
- Custom Sublime Text Build Systems For Popular Tools And Languages
- Particle system!
- 16.particle
- Particle Universe
- particle Designer
- Particle Trimming
- particle-editor
- Particle System
- Particle Filter
- Particle System
- Particle Engine Using OpenGL
- 运行Spark项目出错error: error while loading <root>, error in opening zip file
- 第六章Andorid的Drawable(Android开发艺术探索)
- 我用虚拟机装LoadRunner11的心路历程
- Cent OS查看Apache,Mysql和PHP版本信息
- 线性链表的c语言实现
- Text Particle Systems
- mybatis generator(基于maven、mysql)
- 第7条:避免使用终结方法
- 逻辑回归(Logistic Regression)
- 算法:集合的划分原理及代码实现
- android action简单使用
- android RILJ运行机制
- Linux 安装go语言及配制环境变量
- 番茄时间管理法(Pomodoro Technique):一个番茄是如何让你工作更有效率的