1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉。
2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动
a. HTML代码,定义canvas标签
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); (i = (x + y * imgData.width) * 4;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; (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();