canvas制作动态文字颗粒动画

久违的想玩下，且回顾下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/iconvar 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 gapsfor(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 positiony: y,x2: startx, //start positiony2: 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 releasedif (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 circlecontext.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 positionsmouseOnScreen = 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");

canvas制作动态文字颗粒动画相关推荐

html制作动态坐标轴,HTML5 canvas制作动态随机星图
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 本篇将会介绍如何用canvas制作动态随机移动的星图啦啦啦小白在远离小白道路上的第一步就是搭个博客前言这次的博文不 ...
Canvas 3D球形文字云动画特效
Canvas 3D球形文字云动画特效 Canvas 3D球形文字云动画特效效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. ...
极光特效 html,FLASH教程：用Flash制作极光文字特效动画教程 - 学无忧
案例描述: 本例主要讲解用Flash制作极光文字特效动画教程,本例主要使用"发光"."模糊''滤镜和遮罩功能来制作极光文字效果. 学习要点:文字处理的基本技法,关键帧动画 ...
html5 svg 遮罩,HTML5 SVG和CSS3制作动态文字遮罩背景特效
在上一个教程中,我们使用SVG和CSS制作了文字遮罩效果.在这个教程中,我们将要使用SVG和CSS3来向你展示两种动态遮罩文字背景的效果.第一中效果是在鼠标滑过遮罩文字的时候,文字背景会有彩虹背景动画 ...
html5教程鼠标,利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了「画面在活动」的视觉效果.明白了这一点后,在canvas上绘制动画效果就显得比较简单了.我们只需 ...
Canvas制作动态进度加载水球
前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 样式预览 height="342" width="1 ...
Canvas制作排序算法演示动画
tips: 形象化演示排序算法可以让初学者快速理解,比较好的例子:jun-lu的SortAnimate,旧金山大学的David Galles教授的算法演示课件.最近在看canvas,试着用js+can ...
html动画变圆,HTML5 canvas制作圆形的万花筒动画效果
Canvas圆形万花筒动画效果 window.οnlοad=function(){ var canvas = document.getElementById("canvas"); ...
android 动态水球,Canvas 制作动态进度加载水球详解及实例代码
Canvas 动态进度加载水球前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路关于水波的实现,使用了sin()函数,通 ...

canvas制作动态文字颗粒动画

canvas制作动态文字颗粒动画相关推荐

最新文章

热门文章