文字粒子化,额或者叫小圆圈化... 
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. 自主架设VOIP系统

    my.oschina.net/fcboys/blog/2695 FXS (Foreign Exchange Station) FXS is an interface which drives a te ...

  2. 通过例子学python（2.2）

    2.2 通用序列操作 #2.2 通用序列操作 #所有序列类型都可以进行的操作:索引indexing,分片sliceing,加adding,乘multiplying,成员资格, #计算序列长度,找出最大 ...

  3. HTML5 Security Cheatsheet使用说明

    1.URL: https://html5sec.org/ 2.通过点击如图button(也可点击其他:xss firefox)那行的button可以搜索所有button的Cheatsheet,查看都有 ...

  4. 超级好用的国际汇兑平台－－Transferwise

    一年的CSC留学快结束了,手里还剩了些积攒下来的美元.就国内那点博士的工资,出来一趟好不容易领了点美元可不想都给银行汇兑的手续费给吞了去. 这两天英国退欧,英镑大跌,美元有涨,是个把手里的美元寄回国换 ...

  5. usb转串口如何配置?

    概述 USB转串口输出,在kernel启动阶段加载相应的usb转串口芯片驱动,加载成功后,可通过usb转串口与pc机端交互. 步骤 1.  在kernel配置中选中usb转串口驱动: 2.  传给内核 ...

  6. php开发工具zendstudio13破解补丁

    io?  Intelligent Code Editor Robust Debugging Capabilities Eclipse Ecosystem Mobile: AngularJS, Ioni ...

  7. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 移植opencv库到zedboard（制作运行库镜像） 分类： OpenCV ZedBoard ubuntu shell Eye_Detection 2014-11-08 18:48 172人阅读 评论(0) 收藏

    主要参考rainysky的博客 http://ledage.eefocus.com/sj229335457/blog/13-06/295352_ad954.html opencv的话只需要将lib这个 ...

  9. UVA10972 - RevolC FaeLoN(双连通分量)

    题目链接 题意: 给定一个无向图,问最少加入多少条边,使得这个图成为连通图 思路:首先注意题目给出的无向图可能是非连通的,即存在孤立点.处理孤立点之后.其它就能够当作连通块来处理.事实上跟POJ335 ...

  10. 字符串 赋值 以及gets

    我们知道字符串用字符数组或用指针实现,但是在赋值的时候产生了不少疑惑 使用方法一: char a[ ]={"I LOVE YOU!"}; 但是以下这样就是错的: char a[20 ...