HTML5 Canvas粒子效果文字动画特效 | HTML5资源教程随便谈谈用canvas来实现文字图片粒子化
随便谈谈用canvas来实现文字图片粒子化
　　看了岑安大大的教程后，让我见识到了canvas操控像素能力的强大，也就自己试着做了一下。发现如此好玩的效果也正如岑安大大所说的一样，事情没有想象中那么难。　　先看个DEMO吧，先从文字下手：文字粒子化　　要做出这样的效果，只需要懂的使用canvas的getImgData()就行了。该方法能够复制画布上指定矩形的像素数据，用法很简单：　　var imgData=context.getImageData(x,y,width,height);　　就酱紫就可以获取到imgData。imgData是获取到的像素信息，具体如下　　对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：　　R - 红色 (0-255) & &G - 绿色 (0-255) & &B - 蓝色 (0-255) & &A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)　　只要是有前端编程经验的，都肯定知道rgba了，而获取到的imgData就是一个存放着制定矩形中所有像素数组的数组，第一个像素的R是imgData[0]，G是imgData[1]，B是imgData[2]，A则是imgData[3]，第二个像素的R是imgData[4]，G是imgData[5]，B是imgData[6]，A则是imgData[7]。。。以此类推。然后，既然我们已经获取到了所有像素里的rgba参数了，我们也就可以很简单的对这些参数进行更改，然后再将更改后的imgData通过putImageData()方法贴到画布上。像素处理完毕。就是如此简单。　　知道如何获取像素数据后，接下来就可以开搞了~~~关键代码就下面这些：　　function getimgData(text){
drawText(text);
var imgData = context.getImageData(0,0,canvas.width , canvas.height);
context.clearRect(0,0,canvas.width , canvas.height);
var dots = [];
for(var x=0;x&imgData.x+=6){
for(var y=0;y&imgData.y+=6){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] &= 128){
var dot = new Dot(x-3 , y-3 , 0 , 3);
dots.push(dot);
}　　获取到imgData后，通过两个循环，获得透明度大于128的，也就是有颜色的像素，然后实例化一个粒子对象，存入一个粒子数组中保存，以下是粒子对象代码：　　var Dot = function(centerX , centerY , centerZ , radius){
this.dx = centerX;
//保存原来的位置
this.dy = centerY;
this.dz = centerZ;
this.tx = 0;
//保存粒子聚合后又飞散开的位置
this.ty = 0;
this.tz = 0;
this.z = centerZ;
this.x = centerX;
this.y = centerY;
this.radius =
Dot.prototype = {
paint:function(){
context.save();
context.beginPath();
var scale = focallength/(focallength + this.z);
context.arc(canvas.width/2 + (this.x-canvas.width/2)*scale , canvas.height/2 + (this.y-canvas.height/2) * scale, this.radius*scale , 0 , 2*Math.PI);
context.fillStyle = "rgba(50,50,50,"+ scale +")";
context.fill()
context.restore();
}　　为了让小圆扩散有3D的空间感，所以还引入了Z轴，也就是把3维平面化成二维，具体我就不多说了。可以直接戳 & 我就是看着岑安大大的教程学的。3D效果也做好后，就做动画，随机出一个坐标，让粒子先呆在那个坐标，然后通过保存的位置再聚合，然后再随机出坐标再分散，就是这个动画的原理了。　　下面贴出所有代码：　　&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd"&
&html xmlns="" xml:lang="en"&
&meta http-equiv="Content-Type" content="text/charset=UTF-8"&
window.onload = function(){
canvas = document.getElementById("cas");
context = canvas.getContext('2d');
focallength = 250;
var dots = getimgData(document.getElementById('name').value);;
var pause =
initAnimate();
function initAnimate(){
dots.forEach(function(){
this.x = Math.random()*canvas.
this.y = Math.random()*canvas.
this.z = Math.random()*focallength*2 -
this.tx = Math.random()*canvas.
this.ty = Math.random()*canvas.
this.tz = Math.random()*focallength*2 -
this.paint();
animate();
//计算帧速率
var derection =
function animate(){
animateRunning =
var thisTime = +new Date();
context.clearRect(0,0,canvas.width , canvas.height);
dots.forEach(function(){
if(derection){
if (Math.abs(dot.dx - dot.x) & 0.1 && Math.abs(dot.dy - dot.y) & 0.1 && Math.abs(dot.dz - dot.z)&0.1) {
dot.x = dot.
dot.y = dot.
dot.z = dot.
if(thisTime - lastTime & 300) derection =
dot.x = dot.x + (dot.dx - dot.x) * 0.1;
dot.y = dot.y + (dot.dy - dot.y) * 0.1;
dot.z = dot.z + (dot.dz - dot.z) * 0.1;
lastTime = +new Date()
if (Math.abs(dot.tx - dot.x) & 0.1 && Math.abs(dot.ty - dot.y) & 0.1 && Math.abs(dot.tz - dot.z)&0.1) {
dot.x = dot.
dot.y = dot.
dot.z = dot.
dot.x = dot.x + (dot.tx - dot.x) * 0.1;
dot.y = dot.y + (dot.ty - dot.y) * 0.1;
dot.z = dot.z + (dot.tz - dot.z) * 0.1;
dot.paint();
if(!pause) {
if("requestAnimationFrame" in window){
requestAnimationFrame(animate);
else if("webkitRequestAnimationFrame" in window){
webkitRequestAnimationFrame(animate);
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
document.getElementById('startBtn').onclick = function(){
if(!pause)
dots = getimgData(document.getElementById('name').value);
derection=
initAnimate();
Array.prototype.forEach = function(callback){
for(var i=0;i&this.i++){
callback.call(this[i]);
function getimgData(text){
drawText(text);
var imgData = context.getImageData(0,0,canvas.width , canvas.height);
context.clearRect(0,0,canvas.width , canvas.height);
var dots = [];
for(var x=0;x&imgData.x+=6){
for(var y=0;y&imgData.y+=6){
var i = (y*imgData.width + x)*4;
if(imgData.data[i] &= 128){
var dot = new Dot(x-3 , y-3 , 0 , 3);
dots.push(dot);
function drawText(text){
context.save()
context.font = "200px 微软雅黑 bold";
context.fillStyle = "rgba(168,168,168,1)";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(text , canvas.width/2 , canvas.height/2);
context.restore();
var Dot = function(centerX , centerY , centerZ , radius){
this.dx = centerX;
this.dy = centerY;
this.dz = centerZ;
this.tx = 0;
this.ty = 0;
this.tz = 0;
this.z = centerZ;
this.x = centerX;
this.y = centerY;
this.radius =
Dot.prototype = {
paint:function(){
context.save();
context.beginPath();
var scale = focallength/(focallength + this.z);
context.arc(canvas.width/2 + (this.x-canvas.width/2)*scale , canvas.height/2 + (this.y-canvas.height/2) * scale, this.radius*scale , 0 , 2*Math.PI);
context.fillStyle = "rgba(50,50,50,"+ scale +")";
context.fill()
context.restore();
&title&操控字体的数据&/title&
&canvas id='cas' width="1000" height="500"&浏览器不支持canvas&/canvas&
&input type="text" name="" id="name"
value="王鸿兴"&&button id="startBtn"&开始&/button&
&/html&　　技术不是很好，代码写的不好请见谅。不过应该不难理解。　　知道文字如何粒子化后，图片也就一样的做法了。这里也有几个DEMO：粒子化Demo1 ， 粒子化Demo2。代码就不贴了，通过控制台一样可以看的到代码，毕竟就一个html文件。　　补充一点：过于复杂的图片不适合粒子化，因为对象过多时，对浏览器的造成很大的负荷，动画效果也就会变得很卡很卡了。一般一千个粒子左右比较合适，自己就根据图片复杂度调整粒子的大小，减少粒子数量就行了。
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
港口与航道工程建设工程法规及相关知识建设工程经济考试大纲矿业工程市政公用工程通信与广电工程
操作系统汇编语言计算机系统结构人工智能数据库系统微机与接口
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
Powerpoint教程WPS教程
电子政务客户关系管理首席信息官办公自动化大数据
职称考试题目
就业指导签约违约职业测评
招生信息考研政治
网络安全安全设置工具使用手机安全
3DMax教程Flash教程CorelDraw教程Director教程
Dreamwaver教程HTML教程网站策划网站运营Frontpage教程
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
互联网电信IT业界IT生活
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
组织运营财务资本
视频播放文件压缩杀毒软件输入法微博
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&&&HTML5+Canvas实现的超炫粒子效果文字动画特效源码
HTML5+Canvas实现的超炫粒子效果文字动画特效源码
这是一款基于HTML5 Canvas实现的文字特效源码，在页面下方的输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，动画效果炫酷十足，是值得收藏的html5经典特效。
若举报审核通过，可奖励20下载分
被举报人：
su_xiaoyan
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
移动开发下载排行> HTML5 Canvas粒子效果文字动画特效源码
HTML5 Canvas粒子效果文字动画特效源码
HTML5/CSS3
关键词搜索：
,,,,,,, , , , , ,
HTML5 Canvas粒子效果文字动画特效，可以输入任意文字生成很炫的粒子动画，支持设置
字体大小、
字体颜色等，效果非常炫！
脚本特效素材之家()汇集了全国最优秀的网页特效,网站特效,特效代码,jquery 特效,js 特效,网站特效,jquery特效,js特效,图片特效,文字特效,脚本源码,网站源码等资源-编程从脚本之家开始!
本文标签：}