利用HTML5實現Canvas粒子匯聚文字特效



33 128 43



特效描述:利用HTML5實現 Canvas 粒子匯聚 文字特效,利用HTML5實現Canvas粒子匯聚文字特效

代碼結構

1. HTML代碼

<!-- 嘗試移動鼠標并單擊文本區域 -->
<div id="title-desktop" class="hidden">jQuery</div>
<div id="title-mobile" class="hidden">Chinaz</div>
<canvas id="spring-text"></canvas>
<script>
// WRITTEN BY TRUMAN HEBERLE
var COLOR = "#52E6FF" 
var MESSAGE = document.getElementById("title-desktop").textContent;
var FONT_SIZE = 100;
var AMOUNT = 2000;
var SIZE = 2;
var INITIAL_DISPLACEMENT = 500;
var INITIAL_VELOCITY = 5;
var VELOCITY_RETENTION = 0.95;
var SETTLE_SPEED = 1;
var FLEE_SPEED = 1;
var FLEE_DISTANCE = 50;
var FLEE = true;
var SCATTER_VELOCITY = 3;
var SCATTER = true;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // Mobile
  MESSAGE = document.getElementById("title-mobile").textContent;
  FONT_SIZE = 50;
  AMOUNT = 300;
  SIZE = 2;
  INITIAL_DISPLACEMENT = 100;
  SETTLE_SPEED = 1;
  FLEE = false;
  SCATTER_VELOCITY = 2;
}
const canvas = document.getElementById("spring-text");
const ctx = canvas.getContext("2d");
var POINTS = [];
var MOUSE = {
  x: 0,
  y: 0
}
function Point(x,y,r,g,b,a) {
  var angle = Math.random() * 6.28;
  this.dest_x = x;
  this.dest_y = y;
  this.original_r = r;
  this.original_g = g;
  this.original_a = a;
  this.x = canvas.width/2 - x + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
  this.y = canvas.height/2 - y + (Math.random() - 0.5) * INITIAL_DISPLACEMENT;
  this.velx = INITIAL_VELOCITY * Math.cos(angle);
  this.vely = INITIAL_VELOCITY * Math.sin(angle);
  this.target_x = canvas.width/2 - x;
  this.target_y = canvas.height/2 - y;
  this.r = r;
  this.g = g;
  this.b = b;
  this.a = a;
  this.getX = function() {
    return this.x;
  }
  this.getY = function() {
    return this.y;
  }
  this.resetTarget = function () {
    this.target_x = canvas.width/2 - this.dest_x;
    this.target_y = canvas.height/2 - this.dest_y;
  }
  this.fleeFrom = function(x, y) {
    this.velx -= ((MOUSE.x - this.x) * FLEE_SPEED / 10);
    this.vely -= ((MOUSE.y - this.y) * FLEE_SPEED / 10);
  }
  this.settleTo = function(x, y) {
    this.velx += ((this.target_x - this.x) * SETTLE_SPEED / 100);
    this.vely += ((this.target_y - this.y) * SETTLE_SPEED / 100);
    this.velx -= this.velx * (1-VELOCITY_RETENTION);
    this.vely -= this.vely * (1-VELOCITY_RETENTION);
  }
  this.scatter = function() {
    var unit = this.unitVecToMouse();
    var vel = SCATTER_VELOCITY * 10 * (0.5 + Math.random() / 2);
    this.velx = -unit.x * vel;
    this.vely = -unit.y * vel;
  }
  this.move = function() {
    if (this.distanceToMouse() <= FLEE_DISTANCE) {
      this.fleeFrom(MOUSE.x, MOUSE.y);
    }
    else {
      this.settleTo(this.target_x, this.target_y);
    }
    if (this.x + this.velx < 0 || this.x + this.velx >= canvas.width) {
      this.velx *= -1;
    }
    if (this.y + this.vely < 0 || this.y + this.vely >= canvas.height) {
      this.vely *= -1;
    }
    this.x += this.velx;
    this.y += this.vely;
  }
  this.distanceToTarget = function() {
    return this.distanceTo(this.target_x, this.target_y);
  }
  this.distanceToMouse = function() {
    return this.distanceTo(MOUSE.x, MOUSE.y);
  }
  this.distanceTo = function(x, y) {
    return Math.sqrt((x - this.x)*(x - this.x) + (y - this.y)*(y - this.y));
  }
  this.unitVecToTarget = function() {
    return this.unitVecTo(this.target_x, this.target_y);
  }
  this.unitVecToMouse = function() {
    return this.unitVecTo(MOUSE.x, MOUSE.y);
  }
  this.unitVecTo = function(x, y) {
    var dx = x - this.x;
    var dy = y - this.y;
    return {
      x: dx / Math.sqrt(dx*dx + dy*dy),
      y: dy / Math.sqrt(dx*dx + dy*dy)
    };
  }
}
window.addEventListener("resize", function() {
  resizeCanvas()
  adjustText()
});
if (FLEE) {
  window.addEventListener("mousemove", function(event) {
    MOUSE.x = event.clientX;
    MOUSE.y = event.clientY;
  });
}
if (SCATTER) {
  window.addEventListener("click", function(event) {
    MOUSE.x = event.clientX;
    MOUSE.y = event.clientY;
    for (var i=0; i<POINTS.length; i++) {
      POINTS[i].scatter();
    }
  });
}
function resizeCanvas() {
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
}
function adjustText() {
  ctx.fillStyle = COLOR;
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  ctx.font = FONT_SIZE + "px Arial";
  ctx.fillText(MESSAGE, canvas.width/2, canvas.height/2);
  var textWidth = ctx.measureText(MESSAGE).width;
  if (textWidth == 0) {
    return;
  }
  var minX = canvas.width/2 - textWidth/2;
  var minY = canvas.height/2 - FONT_SIZE/2;
  var data = ctx.getImageData(minX, minY, textWidth, FONT_SIZE).data;
  var isBlank = true;
  for (var i=0; i<data.length; i++) {
    if (data[i] != 0) {
      isBlank = false;
      break;
    }
  }
  if (!isBlank) {
    var count = 0;
    var curr = 0;
    var num = 0;
    var x = 0;
    var y = 0;
    var w = Math.floor(textWidth);
    POINTS = [];
    while (count < AMOUNT) {
      while (curr == 0) {
        num = Math.floor(Math.random() * data.length);
        curr = data[num];
      }
      num = Math.floor(num / 4);
      x = w/2 - num%w;
      y = FONT_SIZE/2 - Math.floor(num/w);
      POINTS.push(new Point(x,y,data[num*4],data[num*4 + 1],data[num*4 + 2],data[num*4 + 3]));
      curr = 0;
      count++;
    }
  }
}
function init() {
  resizeCanvas()
  adjustText()
  window.requestAnimationFrame(animate);
}
function animate() {
  update();
  draw();
}
function update() {
  var point;
  for (var i=0; i<POINTS.length; i++) {
    point = POINTS[i];
    point.move();
  }
}
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var point;
  for (var i=0; i<POINTS.length; i++) {
    point = POINTS[i];
    ctx.fillStyle = "rgba("+point.r+","+point.g+","+point.b+","+point.a+")";
    ctx.beginPath();
    ctx.arc(point.getX(),point.getY(),SIZE,0,2*Math.PI);
    ctx.fill();
  }
  window.requestAnimationFrame(animate);
}
init();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 广西快三官方开奖 河南快三开奖结果走势图 2019最新捕鱼棋牌注册送金币 网上在线棋牌 福建36选7开奖今晚开奖结果 竞彩足球中国足彩网 药学本科毕业后做什么赚钱 余额宝赚钱了 天弘基金还在亏 北京pk赛车7码计划软件 3d独胆必中方法 阿里彩票手机app下载 浙江十一选五3注万能7码 内蒙古时时彩彩开奖结果走势图 智博彩票网址导航 福建快3今天推荐号码 上海快3走势图一基本走势图