1. 之前有放过一个初始版本，但是因为在旋转的时候，有比较大的瑕疵，造成每个点运动到端点后，出现类似撞击的感觉。

2. 所以本文对旋转作了些调整，运用类似水平方向的圆周运动

a. HTML代码，定义canvas标签

<!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="particles"></canvas>

    <script type="text/javascript" src="particle-main.js"></script>

</body>

</html>

b. js代码，实现文字转粒子，再进行运动的过程

var canvas, ctx;

canvas = document.getElementById("particles");

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

canvas.width = 230;

canvas.height = 230;

var dots = [];

var Dividingline = 110;

function init() {

    xiezi();

    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

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

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

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

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

            var dot = {

                x: 0,

                y: 0

            };

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

                dot.x = x;

                dot.y = y;

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

            }

        }

        fengexian();

        //run();

    }

}

function xiezi() {

    ctx.beginPath();

    ctx.font = "50px Comic Sans MS";

    ctx.fillText("SoDiSnI", 20, 100);

    ctx.fill();

}

function drawparticles() {

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

        var particle = dots[i];

        ctx.beginPath();

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

        ctx.fill();

    }

}

function fengexian() {

    ctx.beginPath();

    ctx.moveTo(Dividingline, 0);

    ctx.lineTo(Dividingline, 230);

    ctx.stroke();

}

var hudu = 0;

function run() {//主要利用弧度的特性,截取圆周运动的x坐标,可以理解为按圆周运动,但是y坐标不变,

    //相对应的在平面上看起来,快到端点的时候运动慢,在中线附近就较快

    if (hudu < 360) {

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

            var particle = dots[i];

            var newx=Math.cos(hudu) * (Dividingline - particle.x) + Dividingline;

            ctx.beginPath();

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

            ctx.fill();

        }

        hudu+=0.1;//细化弧度,可以保证横坐标运动的间距小

    }

    else {

        hudu = 0;

    }

}

function clean() {

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

}

setInterval(function () {

    clean();

    run();

}, 50);

init();

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

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

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

  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. 【索引】Objective-C基础教程-读书笔记

    第1章 启程 http://www.cnblogs.com/duxiuxing/p/5492219.html 第2章 对C的扩展 第3章  面向对象编程的基础知识 第4章 继承 第5章 复合 第6章 ...

  2. [置顶] linux下让php支持mysql——寻找消失的mysql

       问题 最近我都在忙一个课件录制系统.这两天发现其中服务器端的一个更新数据库的php脚本运行有问题,一些本应该是系统自带函数却无法运行.于是我展开了调查... 服务器端是centos系统,其中ph ...

  3. ArrStack——数组栈（procedure）

    //数组栈,对于无法预料栈的长度情况下,可能会因为原分配数组不够长而导致数据溢出,或因为数组太长而浪费空间.但是操作快,不需要额外的操作.而链表与此想法,可以动态分配内存,但是要增加额外的操作. #i ...

  4. Qt 智能指针学习（7种指针）

    Qt 智能指针学习 转载自:http://blog.csdn.net/dbzhang800/article/details/6403285 从内存泄露开始? 很简单的入门程序,应该比较熟悉吧 ^_^ ...

  5. 如何优化cocos2d程序的内存使用和程序大小：第一部分_（转）

    译者: 在我完成第一个游戏项目的时候,我深切地意识到“使用cocos2d来制作游戏的开发者们,他们大多会被cocos2d的内存问题所困扰”.而我刚开始接触cocos2d的时候,社区里面的人们讨论了一个 ...

  6. docker 查看容器详细

    http://www.docker.org.cn/book/docker/checking-running-image-12.html

  7. 基于XMPP实现的Openfire的配置安装+Android客户端的实现[转]

    最近在整理一些这方面的资料,闲话少说,咱还是直奔主题吧 :) http://blog.csdn.net/sk719887916/article/details/40541163 https://git ...

  8. Linux多线程——使用互斥量同步线程

    前文再续,书接上一回,在上一篇文章: Linux多线程——使用信号量同步线程中,我们留下了一个如何使用互斥量来进行线程同步的问题,本文将会给出互斥量的详细解说,并用一个互斥量解决上一篇文章中,要使用两 ...

  9. ural 1018 Binary Apple Tree（树形dp | 经典）

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  10. [Redux] Adding React Router to the Project

    We will learn how to add React Router to a Redux project and make it render our root component. Inst ...