文字粒子化,额或者叫小圆圈化... 
1 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <canvas id="particle" width="500" height="300"></canvas>

     <script type="text/javascript">

         var canvas = document.getElementById("particle");

         var ctx = canvas.getContext("2d");

         var dots = [];//定义数组，用于存放后续的坐标(x,y)

         function init() {

             ctx.beginPath();

             ctx.font = "80px Arial";

             ctx.fillStyle = "rgba(0,0,0,1)";

             ctx.fillText("Canvas",150,150);

             ctx.fill();//画一个文字,颜色就随意，a值尽量高点

             var img = ctx.getImageData(0, 0, canvas.width, canvas.height);//getImageData，专门用于获取图片数据，这里直接取了整个Canvas

             ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布，就是把之前的文字清空，因为后面要以粒子（应该叫小圆圈）代替

             for (var y = 0; y < img.height; y +=3) {//y+=3，是因为如果按像素取，有效值非常多，所以这里就每隔3像素取一点

                 for (var x = 0; x < img.width; x +=3) {//y是高，x是宽

                     var i = (x + y * img.width)*4;//这边就从左往右，从上往下；500X300的大小，会取166×100个像素点；×4则是因为rgba()

                     var dot = {

                         x: 0,

                         y: 0

                     };

                     if (img.data[i + 3] >= 128) {//因为img.data中包含了每个像素点的rgba，＋3表示取a的值

                         dot.x = x;

                         dot.y = y;

                         dots.push(dot);//将每个满足条件的xy Add到dots数组中

                     }

                 }

             }

             for (var m = 0; m < dots.length; m ++) {//遍历数组，将每个数组的xy以圆的方式展出

                 //document.write(dots[m].x + "&nbsp;" + dots[m].y + "</br>");//瞄一瞄每个坐标

                 ctx.beginPath();

                 ctx.arc(dots[m].x, dots[m].y, 1, 0, Math.PI * 2, true);

                 ctx.fill();

             }

         }

         window.onload = ("load", init(), true);

     </script>

 </body>

 </html>

HTML5 <Canvas>文字粒子化的更多相关文章

  1. 基于HTML5 Canvas生成粒子效果的人物头像

    前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...

  2. Canvas实现文字粒子化，并且绕轴旋转（完善）

    1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉. 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义c ...

  3. Canvas实现文字粒子化，并且绕轴旋转（初号机）

    写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...

  4. HTML5 Canvas ( 文字的度量 ) measureText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  8. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 随便谈谈用canvas来实现文字图片粒子化

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...

随机推荐

  1. SSH隧道技术----端口转发，socket代理

    原文的原始出处不详,本文也是在复制引用了某篇转载,并做了必要的整理与编辑. 本文的受众 如果你遇到了以下问题,那么你应该阅读这篇文章 我听说过这种技术,我对它很感兴趣 我想在家里访问我在公司的机器(写 ...

  2. java对Ldap操作1

    package ldap;import java.util.List;import ldap.pojo.LdapPersonInfo;/** * access Ldap *  * @author 张亮 ...

  3. 10881 - Piotr's Ants(排序）

    题目链接:10881 - Piotr's Ants 题目大意:在一个长为L的木棒上有n只蚂蚁,给出蚂蚁的初始位置以及方向,问说移动T秒后各个蚂蚁的位置以及状态,如果两只蚂蚁在移动的过程中相撞,则会同时 ...

  4. Android之打开闪光灯关键代码

    在AndroidManifest中注册相应的权限: <uses-permission android:name="android.permission.FLASHLIGHT" ...

  5. HDU--5280(dp或枚举)

    官方题解: 这个题有非常多O(n2)的算法.这里说一种:枚举每个区间,在枚举区间的同一时候维护区间内的最小值和区间和,将最小值与P的大小进行比較,贪心地取最大值就可以.注意若枚举到的区间是整个数组,则 ...

  6. delphi TSaveDialog

    TSaveDialog 预览          实现过程 动态创建和使用保存文件对话框 procedure TForm1.Button1Click(Sender: TObject);begin  wi ...

  7. 利用ssh传输文件 分类： 服务器搭建 Raspberry Pi 2015-04-12 18:47 58人阅读 评论(0) 收藏

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件 scp username@servername:/path/filename /var/www/local_dir(本 ...

  8. CSU1315：全场最水题之陈兴老师与比赛

    Description 大家都知道ACM比赛罚时很重要.比如说你做A题要10分钟,B题要15分钟,如果先做A题再做B题,那么在ranking上的时间就是10 + (10)+ 15 = 35.如果先做B ...

  9. 简单回顾C++中的字符串

    C++中有两种字符串形式,一种是C语言字符数组,一般可以使用 char*指针来操作它:另一种是C++中基于标准库的string类型,这算是更高层次的抽象数据类型. 主要讨论一下string类型,既然是 ...

  10. MySQL存储过程学习笔记

    MySQL在5.0以前并不支持存储过程,这使得MySQL在应用上大打折扣.MySQL 5.0终于开始支持存储过程了. MySQL的关键字大小写通用.该学习笔记对关键字使用大写:变量名,表名使用小写. ...