你的位置:首页 > 网页设计

[网页设计]Canvas实现文字粒子化,并且绕轴旋转(完善)


1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉。

2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动

a. HTML代码,定义canvas标签

<!DOCTYPE html><html ="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();