写下来发现，程序在细节上处理的很差，比如旋转的时候，在终点处有明显的撞墙感觉，以及小部分粒子存在精度差异，导致撞击后不与整体平衡。

注释全在代码中了，就不多说了，另外感觉写的旋转的规则有点怪，后续再调整吧。

<!DOCTYPE html>

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

<head>

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

    <title>Test0901</title>

</head>

<body>

    <canvas id="particle" width="500" height="300" style="border:1px solid"></canvas>

    <script type="text/javascript">

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

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

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

        var space = [];

        var pos = {

            x: 250,

            y: 100

        };

        function line(x) {

            ctx.beginPath();

            ctx.moveTo(x, 0);

            ctx.lineTo(x, 300);

            ctx.strokeStyle = "rgb(69,69,69,0.5)";

            ctx.stroke();

        }

        var j = [];

        //var pattern;

        //var image = new Image();

        //image.onload = function (e) {

        //    pattern = ctx.createPattern(image, "repeat");

        //}

        //image.src = "doge.jpg";

        function init() {

            ctx.beginPath();

            ctx.font = "100px Arial";

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

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

            //ctx.fillStyle = pattern;

            //ctx.rect(0, 0, canvas.width, canvas.height);

            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] >= 228) {//因为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>");//瞄一瞄每个坐标

                space[m] = pos.x - dots[m].x;

                ctx.beginPath();

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

                ctx.fill();

                j[m] = 0;

            }

        }

        /*以下瞎写*/

        function rotate() {

            for (var i = 0; i < dots.length; i++) {

                var spc = space[i];

                var spc1 = Math.abs(spc);

                var dot = dots[i];

                if (j[i] <= 2 * spc1) {

                    dot.x = dot.x + spc / 200;

                    j[i] += spc1 / 200;

                }

                else {

                    j[i] = 0;

                    spc = -spc;

                    space[i] = spc;

                }

                draw(dot.x, dot.y);

            }

        }

        function draw(x, y) {

            ctx.beginPath();

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

            ctx.fill();

        }

        function clean() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

        }

        setInterval(function () {

            clean();

            line(pos.x);

            rotate();

        }, 10);

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

    </script>

</body>

</html>

Canvas实现文字粒子化，并且绕轴旋转（初号机）的更多相关文章

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

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

  2. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  3. canvas特效-文字粒子

    具体的效果 https://www.ui.cn/detail/393461.html 实现类似的动效 要求: 1.文字内容可以自定义 2.粒子的运动轨迹 是曲线,返回是按照 原运动轨迹 3.粒子 堆叠 ...

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

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

  5. 空间点绕轴旋转公式&程序(C++)

    关键词:空间旋转.旋转轴 用途:相机位姿估计.无人机位姿估计.3D游戏.3D建模 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请搜索文献),C++函数展示 @Author:V ...

  6. PS 软件操作应用处理——粒子化任务效果

      前  言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...

  7. canvas学习之粒子动画

    项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...

  8. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  9. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

随机推荐

  1. HDOJ1181变形课 深搜回溯

    变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Submissi ...

  2. [git] git 分支( branch ) 的基本使用

    分支( branches ) 是指在开发主线中分离出来,做进一步开发而不影响到原来主线. Git 存储的不是一系列的更改集( changeset ),而是一系列快照.当你执行一次 commit 时, ...

  3. 如何将下载好的jar包添加到maven本地仓库

    1.首先在pom.xml中添加 <dependency>    <groupId>org.springframework.security</groupId>    ...

  4. JS方法在iframe父子窗口间的调用

    本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...

  5. BZOJ 3333 排队计划 树状数组+线段树

    题目大意:给定一个序列.每次选择一个位置,把这个位置之后全部小于等于这个数的数抽出来,排序,再插回去,求每次操作后的逆序对数 首先我们每一次操作 对于这个位置前面的数 因为排序的数与前面的数位置关系不 ...

  6. /var/log目录下的20个Linux日志文件功能详解 分类： 服务器搭建 linux内核 Raspberry Pi 2015-03-27 19:15 80人阅读 评论(0) 收藏

    如果愿意在Linux环境方面花费些时间,首先就应该知道日志文件的所在位置以及它们包含的内容.在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. 以下介绍的 ...

  7. [RxJS] map vs flatMap

    What's the difference between map and flatmap? First, let's show what map is. To show that, I need a ...

  8. 新秀学习Hibernate——简单的增加、删、更改、检查操作

    部分博客使用Hibernate单的样例,把数据库的映射显示了出来在上一篇的博客基础上这篇博客讲述怎样利用Hinbernate框架实现简单的数据库操作. 1.增加junit.jar 2.新建一个工具类H ...

  9. 如何写一个网页标题title的闪动提示(转)

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  10. android 11 模拟onclick 事件

    package com.sxt.callback; public class Button { //预存一段按钮点击的响应代码 private OnclickListener mOnClickList ...