HTML5实验室【三十】—TextParticleSystems之心碎

在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择&＃xff1a;

1.Flash制作的文字特效

2.制作一个动态的GIF

3.Javascript dom css

4.SVG

这篇我为大家介绍第五种&＃xff0c;也是最强大的一种&＃xff0c;上面四种都有局限性。

我使用的是Javascript Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大??

因为Canvas支持像素级别操作&＃xff0c;它不仅可以宏观上制作一些文字特效&＃xff0c;也可以深入实现文字粒子系统特效----Text Particle Systems。

当然Canvas的像素级别操作还广泛用于图片处理等更多领域&＃xff0c;在HTML5实验室http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html里也有了好多案例··

我们现在黑色背景下写一个“心”字&＃xff1a;

var tex &＃61; "心";
cxt.fillStyle &＃61; "rgba(0,0,0,1)";
cxt.fillRect(0, 0, 430, 400);
cxt.fillStyle &＃61; "rgba(255,255,255,1)"
cxt.font &＃61; "bolder 400px 宋体";
cxt.textBaseline &＃61; &＃39;top&＃39;;
cxt.fillText(tex, 20, 20);

然后我们遍历所有的像素点&＃xff0c;并把画上了字的像素点放进一个数组里面&＃xff1a;

for (y &＃61; 1; y <400; y &＃61; 10) {
for (x &＃61; 1; x <400; x &＃61; 10) {
imageData &＃61; cxt.getImageData(20 x, 20 y, 1, 1);
if (imageData.data[0] > 170) {
ps.push({ px: 20 x, py: 20 y });
}
}
}

然后我们&＃xff0c;在每个点上画一个小球&＃xff0c;并随机生成X和Y方向的速度&＃xff1a;

for (i in ps) {
var ball &＃61; {
x: ps[i].px,
y: ps[i].py,
r: 2,
vx: getRandomNumber(-10, 10),
vy: getRandomNumber(0, 100)
};
balls.push(ball);
}
cxt.fillStyle &＃61; "#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();
}

我们再模拟一个重力场和非弹性碰撞&＃xff0c;加上Jscex 制作动画效果&＃xff1a;

var dropAsync &＃61; eval(Jscex.compile("async", function () {
while (true) {
if (breakTag) {
break;
}
cxt.fillStyle &＃61; "rgba(0, 0, 0, .3)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle &＃61; "#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 &＃61; balls[i].vy * cyc / 1000;
balls[i].x &＃61; balls[i].vx * cyc / 1000;
if (balls[i].r balls[i].y >&＃61; canvas.height) {
if (balls[i].vy > 0) {
balls[i].vy *&＃61; -0.7;
}
}
else {
balls[i].vy &＃61; a;
}
}
$await(Jscex.Async.sleep(cyc));
}
}))

本文已同步更新至&＃xff1a;

HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html