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

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