一.簡介

在一些企業(yè)廣告或者網(wǎng)站需要一些動態(tài)文字特效的時候,往往有下面這幾種選擇：

1.Flash制作的文字特效

2.制作一個動態(tài)的GIF

3.Javascript+dom+css

4.SVG

二.javascript+Canvas文字特效

這篇我為大家介紹第五種，也是最強大的一種，上面四種都有局限性。

我使用的是javascript+Canvas,當(dāng)然我們依然用Jscex,為什么Canvas制作文字特效最強大??

因為Canvas支持像素級別操作，它不僅可以宏觀上制作一些文字特效，也可以深入實現(xiàn)文字粒子系統(tǒng)特效----Text Particle Systems。

當(dāng)然Canvas的像素級別操作還廣泛用于圖片處理等更多領(lǐng)域，在HTML5實驗室http://www.rzrgm.cn/iamzhanglei/archive/2011/11/06/2237870.html里也有了好多案例··

三.特效實現(xiàn)

我們現(xiàn)在黑色背景下寫一個“心”字：

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

然后我們遍歷所有的像素點，并把畫上了字的像素點放進一個數(shù)組里面：

                   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.rzrgm.cn/iamzhanglei/archive/2011/11/06/2237870.html