canvas 文字转化为粒子
var canvas = document.createElement('canvas');
var cxt = canvas.getContext('2d');
var W = canvas.width = 500;
var H = canvas.height = 200;
var str = 'Grewer,点击此处';
cxt.textBaseline = 'hanging';
cxt.font = '60px 宋体'
var sw = cxt.measureText(str).width;
if (sw > W) {
sw = W;
}
cxt.fillText(str, (W - sw) / 2, (H - 60) / 2, W); canvas.style.border = '1px solid #ddd' document.body.appendChild(canvas); var imageData = cxt.getImageData(0, 0, W, H); var getV = function(i,j) {
var v = Math.random() * 1;
v = v < 0.1 ? 0.1 : v;
var slope = (i-W/2) / (j-H/2);
slope = slope < 0 ? -slope :slope;
var x = v*slope;
var y = v;
if(i<W/2&&j<H/2){
x = -x;
y = -y;
};
if(i<W/2&&j>H/2){
x = -x;
};
if(i>W/2&&j<H/2){
y = -y;
};
return{x:x,y:y}
} function getDots(imageData) {
//从imageData对象中取得粒子,并存储到dots数组中
var dots = [];
//dots的索引
var index = 0;
for (var i = 0; i < W; i++) {
for (var j = 0; j < H; j++) {
//data值中的红色值
var k = 4 * (i + j * W);
//data值中的透明度
if (imageData.data[k + 3] > 0) {
var v = getV(i,j);
dots[index++] = {
'index': index,
'x': i,
'y': j,
'red': k,
'vX': v.x,
'vY': v.y,
} }
}
} var newDots = [];
var len = dots.length;
for (var i = 0; i < len; i++) {
newDots.push(dots.splice(Math.floor(Math.random() * dots.length), 1)[0]);
}//打乱顺序 return newDots; } var dataArr = getDots(imageData) var random = function() {
cxt.clearRect(0, 0, W, H); for (var i = 0; i < dataArr.length; i++) {
var temp = dataArr[i];
temp.x += temp.vX;
temp.y += temp.vY
cxt.fillRect(temp.x, temp.y, 1, 1);
} window.requestAnimationFrame(random);
}
document.onclick = function(e) {
e = e || event;
var x = e.clientX - canvas.getBoundingClientRect().left;
var y = e.clientY - canvas.getBoundingClientRect().top; if ((0 <= x) && (x <= 500) && (0 <= y) && (y <= 200)) {
random();
}
}
参考文章:http://www.cnblogs.com/xiaohuochai/p/7452898.html
网页查看: https://grewer.github.io/JsDemo/canvasParticle/
canvas 文字转化为粒子的更多相关文章
- js将文字转化为语音并播放
js将页面中的某些文字信息转化为语音并自动播放 <!DOCTYPE html><html lang="en"><head> <meta c ...
- [js常用]文字转化成语音
使用百度语音接口,实现文字转化成语音播放 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- 微信小程序之canvas 文字断行和省略号显示
文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='wor ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- HTML5 Canvas ( 文字的度量 ) measureText
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形
canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...
随机推荐
- Linux:DHCP服务配置
DHCP服务程序能够使局域网内的主机自动且动态的获取IP地址.子网掩码.网关地址以及DNS服务器地址等信息. 说明:先安装DHCP服务 yum install dhcp -y ...
- Linux查看Port状态命令、密钥SSH、会话同步
查看Port状态 ss -ntl命令,参数: 参数 作用 -a 显示所有的套接字 -l 显示所有连接状态的套接字 -e 显示详细的套接字信息 -m 显示套接字的内存使用情况 -p 显示套接字的进程信息 ...
- Linux学习笔记记录(三)
压缩: 例如将/etc 目录压缩为压缩包tar -cjvf /aaa.tar.bz2 /etc tar -czvf /aaa.tar.gz /etc 解压: tar -xjv ...
- linux设置系统时间与各种阻塞
前阵子做了一个P2P的通信系统,发现开机的时候和中间运行的时候会莫名报错,这个问题找了好久,后来从日志中看出来,所有节点上阻塞的操作同时超时. 而在超时左右,有新节点自动加入系统. 在新节点加入系统的 ...
- mysql 查询出的数组为null怎么转换成0
mysql 查询出的数组为null怎么转换成0 IFNULL(b.dayPay,0) as yesterdayPay,
- MongoDB怎么快速的删除数据库数据?
我的mongodb里有10+数据库.现在需要重置这个环境,得到干净的没有数据的MongoDB.怎么快速安全的删除这些数据库数据呢? 记得首先备份你的数据库mongodump -o bakfolder ...
- 数据结构——算法之(027)( 在O(1)时间内删除链表结点)
[申明:本文仅限于自我归纳总结和相互交流,有纰漏还望各位指出. 联系邮箱:Mr_chenping@163.com] 题目:在O(1)时间内删除链表结点.且不知道链表头 题目分析: 1.把要删除节点的下 ...
- Mysql net start mysql启动,提示发生系统错误 5 拒绝訪问 解决之道
当前用户的操作权限太低了,出了问题 出错问题截屏例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/4 ...
- ORA-01925:maximum of 80 enabled roles exceeded
ORA-01925:maximum of 80 enabled roles exceeded max_enabled_roles 9i的參数,10g及以后都不用了. 指定用户session的最大ena ...
- MVC模式利用xib文件定制collectionCell
数据来源于豆瓣网~仅供学习交流~ 本实例练习用到了SDWebImage框架:实现从网络端下载图片的功能 下载地址:https://github.com/rs/SDWebImage 实现效果及框架: x ...