Text Particle Systems

一.简介

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

1.Flash制作的文字特效

2.制作一个动态的GIF

3.Javascript+dom+css

4.SVG

image

二.javascript+Canvas文字特效

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

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

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

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

 

三.特效实现

我们现在黑色背景下写一个“心”字:

                   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);

然后我们遍历所有的像素点,并把画上了字的像素点放进一个数组里面:

                   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方向的速度:

                   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 制作动画效果:

 

               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));

                   }

               }))

 

四.在线演示



五.同步

本文已同步更新至:

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

你可能感兴趣的:(System)