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

时间：2022-04-21 20:44:08

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

相关文章