Canvas实现文字粒子化,并且绕轴旋转(完善)

来源:互联网 时间:1970-01-01

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

 


相关阅读:
Top