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