久违的想玩下,且回顾下canva颗粒动画制作,在codepen中找了个小案例,看了下源码,学习下,觉得很不错,拿出来给大家分享下:
一、最终预览效果:
二、核心代码逻辑
1. 初始化canvas画布大小
2. canvas绘制文本,设置文本大小,文本位置
3. 绑定鼠标事件
4. 获取画布内文字像素点数据存入颗粒对象数组
5. 更新绘制,更改 x, y的值,指定规则检测结束状态
三、核心代码
function Banner(){
var keyword = "MY LOVE";
var canvas;
var context;
var bgCanvas;
var bgContext;
var denseness = 10;
//Each particle/icon
var parts = [];
var mouse = {x:-100,y:-100};
var mouseOnScreen = false;
var itercount = 0;
var itertot = 40;
// 初始化canvas宽高
this.initialize = function(canvas_id){
canvas = document.getElementById_x_x(canvas_id);
context = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
bgCanvas = document_createElement_x_x('canvas');
bgContext = bgCanvas.getContext('2d');
bgCanvas.width = canvas.width;
bgCanvas.height = canvas.height;
canvas.addEventListener('mousemove', MouseMove, false);
canvas.addEventListener('mouseout', MouseOut, false);
start();
}
// 绘制文字
var start = function(){
bgContext.fillStyle = "#000";
bgContext.font = '300px impact';
bgContext.fillText(keyword, 85, 275);
clear();
getCoords();
}
//获取画布内像素点数据
var getCoords = function(){
var imageData, pixel, height, width;
imageData = bgContext.getImageData(0, 0, canvas.width, canvas.height);
// console.log(imageData.data.length); //3139560
// quickly iterate over all pixels - leaving density gaps
for(height = 0; height < bgCanvas.height; height += denseness){
for(width = 0; width < bgCanvas.width; width += denseness){
pixel = imageData.data[((width + (height * bgCanvas.width)) * 4) - 1];
// pixel is black from being drawn on.
// 当检索到每个像素灰度为255不为0 -> 确定是文字区域 -> 绘制圈
if(pixel == 255) {
drawCircle(width, height);
}
}
}
setInterval( update, 40 );
}
// 绘制圆
var drawCircle = function(x, y){
var startx = (Math.random() * canvas.width);
var starty = (Math.random() * canvas.height);
var velx = (x - startx) / itertot;
var vely = (y - starty) / itertot;
parts.push(
{c: '#' + (Math.random() * 0x949494 + 0xaaaaaa | 0).toString(16),
x: x, //goal position
y: y,
x2: startx, //start position
y2: starty,
r: true, //Released (to fly free!)
v: {x:velx , y: vely}
}
)
}
// 重复绘制
var update = function(){
var i, dx, dy, sqrDist, scale;
itercount++;
clear();
for (i = 0; i < parts.length; i++){
//If the dot has been released
if (parts[i].r == true){
//Fly into infinity!!
parts[i].x2 += parts[i].v.x;
parts[i].y2 += parts[i].v.y;
//Perhaps I should check if they are out of screen... and kill them?
}
if (itercount == itertot){
parts[i].v = {x:(Math.random() * 6) * 2 - 6 , y:(Math.random() * 6) * 2 - 6};
//console.log(parts[i].v)
parts[i].r = false;
}
//Look into using svg, so there is no mouse tracking.
//Find distance from mouse/draw!
dx = parts[i].x - mouse.x;
dy = parts[i].y - mouse.y;
sqrDist = Math.sqrt(dx*dx + dy*dy);
if (sqrDist < 20){
parts[i].r = true;
}
//Draw the circle
context.fillStyle = parts[i].c;
context.beginPath();
context.arc(parts[i].x2, parts[i].y2, 4 ,0 , Math.PI*2, true);
context.closePath();
context.fill();
}
}
//鼠标移动事件监听函数
var MouseMove = function(e) {
if (e.layerX || e.layerX == 0) {
//Reset particle positions
mouseOnScreen = true;
mouse.x = e.layerX - canvas.offsetLeft;
mouse.y = e.layerY - canvas.offsetTop;
}
}
// 鼠标移除事件监听函数
var MouseOut = function(e) {
mouseOnScreen = false;
mouse.x = -100;
mouse.y = -100;
}
// 清除画布
var clear = function(){
context.fillStyle = '#333';
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.closePath();
context.fill();
}
}
var banner = new Banner();
banner.initialize("canvas");