HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化...
1 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<canvas id="particle" width="500" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("particle");
var ctx = canvas.getContext("2d");
var dots = [];//定义数组,用于存放后续的坐标(x,y) function init() {
ctx.beginPath();
ctx.font = "80px Arial";
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillText("Canvas",150,150);
ctx.fill();//画一个文字,颜色就随意,a值尽量高点
var img = ctx.getImageData(0, 0, canvas.width, canvas.height);//getImageData,专门用于获取图片数据,这里直接取了整个Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布,就是把之前的文字清空,因为后面要以粒子(应该叫小圆圈)代替
for (var y = 0; y < img.height; y +=3) {//y+=3,是因为如果按像素取,有效值非常多,所以这里就每隔3像素取一点
for (var x = 0; x < img.width; x +=3) {//y是高,x是宽
var i = (x + y * img.width)*4;//这边就从左往右,从上往下;500X300的大小,会取166×100个像素点;×4则是因为rgba()
var dot = {
x: 0,
y: 0
};
if (img.data[i + 3] >= 128) {//因为img.data中包含了每个像素点的rgba,+3表示取a的值
dot.x = x;
dot.y = y;
dots.push(dot);//将每个满足条件的xy Add到dots数组中
} }
} for (var m = 0; m < dots.length; m ++) {//遍历数组,将每个数组的xy以圆的方式展出
//document.write(dots[m].x + " " + dots[m].y + "</br>");//瞄一瞄每个坐标
ctx.beginPath();
ctx.arc(dots[m].x, dots[m].y, 1, 0, Math.PI * 2, true);
ctx.fill();
}
}
window.onload = ("load", init(), true);
</script>
</body>
</html>
HTML5 <Canvas>文字粒子化的更多相关文章
- 基于HTML5 Canvas生成粒子效果的人物头像
前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下 ...
- Canvas实现文字粒子化,并且绕轴旋转(完善)
1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉. 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义c ...
- Canvas实现文字粒子化,并且绕轴旋转(初号机)
写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...
- 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> ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 随便谈谈用canvas来实现文字图片粒子化
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...
随机推荐
- poj 2425 A Chess Game(SG函数)
A Chess Game Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 3551 Accepted: 1440 Desc ...
- ITU-R BT.656 协议
ITU-R BT.601和ITU-R BT.656国际电信联盟(International Telecommunication Union)无线通信部门(ITU-R)制定的标准.严格来说,ITU-R ...
- hdu 4738 Caocao's Bridges (tarjan求桥)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4738 题目大意:给一些点,用一些边把这些点相连,每一条边上有一个权值.现在要你破坏任意一个边(要付出相 ...
- mvn archetyoe:generate -DarchetypeCatalog=internal
可以使用 $mvn archetype:generate -DarchetypeCatalog=internal archetypeCatalog表示插件使用的archetype元数据,默认值为rem ...
- web项目学习之sitemesh
sitemesh主要有三个主要文件:sitemesh.xml,decorators.xml和做布局用的jsp页面. 一.sitemesh.xml 对于sitemesh.xml这个文件,官方文档上说它不 ...
- Centos6.x 安装vnc
一.安装gnome桌面环境 如果系统已经安装了gnome桌面环境,此步省略. # 安装fontforge,避免字体出现方框乱码 yum install fontforge -y # 安装gnome桌面 ...
- 6 Java学习之 枚举
1. 概念 枚举是一种规范,它规范了参数的形式,这样就可以不用考虑类型的不匹配,并且显示的替代了int型参数可能带来的模糊概念. 常用来定义一个final类型的变量(常量),保证输入安全.如 ...
- Oracle 学习笔记 11 -- 视图 (VIEW)
本次必须学习一个全新的概念-- 视图 (VIEW).在前面的笔记中曾提到过,数据对象包含:表.视图.序列.索引和同义词.前面的笔记都是对表的想剖析,那么本次笔记就对视图的世界进行深入的剖析. 视图是通 ...
- Linux kernel驱动相关抽象概念及其实现 之“linux设备模型kobject,kset,ktype”
kobject,kset,ktype三个很重要的概念贯穿Linux内核驱动架构,特转载一篇博文: (转载自http://blog.csdn.net/gdt_a20/article/details/64 ...
- [转] react-native 之布局篇
PS: 苹果使用的宽度单位是为了设计开发者在应用上使用接近的数值.比如宽度范围都在320-414之间.但是宽度对应到像素是有一个转换比例的,对于背景图尤其要准备足够像素的图片.这个足够像素可以通过公式 ...