一.简介

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

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

Text Particle Systems相关推荐

  1. UIKit Particle Systems in iOS 5 Tutorial ( 附雨的粒子效果 )

    原文地址:http://www.raywenderlich.com/6063/uikit-particle-systems-in-ios-5-tutorial?utm_source=feedburne ...

  2. Unity【Project——beginner——Particle Systems(Shuriken)】

    长达3小时的project,遭重 unity个人笔记,资料来源官网 粒子系统听起来蛮有意思的,就是为什么会叫Shuriken(手里剑)?二次元的浓度提高了 这次视频没有cc字幕..听得懂一点算一点吧, ...

  3. Cesium中级教程8 - Introduction to Particle Systems 粒子系统入门

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ What is a particle system? 什么是粒子 ...

  4. Unity粒子系统创建VFX游戏特效学习教程 Visual Effects in Unity Particle Systems [Beginner’s Guide]

    在Unity中学习高级粒子系统和视觉效果创建.初级到中级 你会学到: 游戏的视觉效果 Unity粒子系统 Unity中的Vfx 创建Unity视觉效果的初级到中级指南 课程获取:Unity粒子系统创建 ...

  5. Cesium中级教程9 - Advanced Particle System Effects 高级粒子系统效应

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 要了解粒子系统的基础知识,请参见粒子系统入门教程. Weathe ...

  6. uni-app text、文本、selectable、自定义长按选择菜单、修改系统菜单键(双端)

    uni-app text.文本.selectable.自定义长按选择菜单.修改系统菜单键(双端):https://ext.dcloud.net.cn/plugin?id=10586 <templ ...

  7. UnrealText: Synthesizing Realistic Scene Text Images from the Unreal World（译）

    UnrealText:合成来自虚幻世界的真实场景文本图像 仅供参考,如翻译不到的请指出,侵权删 来源: CVPR2020,旷视 code 链接: https://jyouhou.github.io/U ...

  8. Particle System Modules (Shuriken)

    Initial Module 初始化模块 This module is always present, cannot be removed or disabled. 这个模块总是存在的,不能删除或禁用 ...

  9. Text Classification Algorithms: A Survey——1. Introduction引言

    "Most text classification and document categorization systems can be deconstructed into the fol ...

  10. Towards End-to-end Text Spotting with Convolutional Recurrent Neural Networks

    文章目录 Abstract 1. Introduction 2. Related Work 2.1. Text Detection 2.2. Text Recognition 2.3. Text Sp ...

最新文章

  1. DRF框架—序列化器中的字段校验规则
  2. 第十九天：实施定性风险分析
  3. [转]IntelliJ IDEA 2019.3正式发布，给我们带来哪些新特性？
  4. 国家开放大学2021春1098中学数学教学研究题目
  5. 红黑树原件 及其插入、删除（附图说明）
  6. jsonarray转liast_fastjson List转JSONArray以及JSONArray转List
  7. css样式 浏览器的读取顺序
  8. 学习jQuery之旅--新手必须知道的常用方法
  9. eclipse lombok插件安装_Eclipse安装virgo插件
  10. 封装的ini文件类。保存为unicode的。解决delphi xe的TiniFile保存后不为unicode的问题...
  11. 华为/华三：OSPF多区域配置
  12. java 当前时间 15分钟_怎么用java 获取15分钟以前的时间
  13. 安卓-控制台-和风天气，和风天气3.0使用方法
  14. java初中学历_20岁学java初中学历
  15. html5闪光效果,css特效-一道闪光在图片上划过
  16. 读明朝那些事儿有感：书生的骨
  17. 网络安全之小程序抓包渗透测试流程
  18. 用Latex写IEEE格式的论文时如何取消页码
  19. php建站： 2019年最好用的6个php环境搭建工具推荐
  20. 蓝桥杯大赛历届省赛真题（软件类）免费下载！！！

热门文章

  1. 关于DLL中的哪段代码被执行的处理方法
  2. Levenshtein编辑距离C++实现
  3. CAngle类 角度转换类 C++
  4. ENVI入门系列教程---二、图像分析---9.遥感图像监督分类
  5. 安装geopandas库
  6. c++输入、输出和文件
  7. qt可以导入3d吗_3D全息投影技术可以用在教育行业吗？
  8. android分享数据到不同平台组件化
  9. Kotlin实战【六】Kotlin中集合的创建
  10. mysql根据视图update表数据_怎么更新Mysql数据表视图中数据