Canvas实现文字粒子化，并且绕轴旋转（初号机）
写下来发现，程序在细节上处理的很差，比如旋转的时候，在终点处有明显的撞墙感觉，以及小部分粒子存在精度差异，导致撞击后不与整体平衡。
注释全在代码中了，就不多说了，另外感觉写的旋转的规则有点怪，后续再调整吧。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test0901</title>
</head>
<body>
<canvas id="particle" width="500" height="300" style="border:1px solid"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("particle");
var ctx = canvas.getContext("2d");
var dots = [];//定义数组，用于存放后续的坐标(x,y)
var space = [];
var pos = {
x: 250,
y: 100
};
function line(x) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 300);
ctx.strokeStyle = "rgb(69,69,69,0.5)";
ctx.stroke();
}
var j = []; //var pattern;
//var image = new Image();
//image.onload = function (e) {
// pattern = ctx.createPattern(image, "repeat");
//}
//image.src = "doge.jpg";
function init() {
ctx.beginPath();
ctx.font = "100px Arial";
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillText("TCG",150,150);
//ctx.fillStyle = pattern;
//ctx.rect(0, 0, canvas.width, canvas.height);
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] >= 228) {//因为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>");//瞄一瞄每个坐标
space[m] = pos.x - dots[m].x;
ctx.beginPath();
ctx.arc(dots[m].x, dots[m].y, 1, 0, Math.PI * 2, true);
ctx.fill();
j[m] = 0;
} } /*以下瞎写*/
function rotate() {
for (var i = 0; i < dots.length; i++) {
var spc = space[i];
var spc1 = Math.abs(spc);
var dot = dots[i];
if (j[i] <= 2 * spc1) {
dot.x = dot.x + spc / 200;
j[i] += spc1 / 200;
}
else {
j[i] = 0;
spc = -spc;
space[i] = spc;
}
draw(dot.x, dot.y);
}
}
function draw(x, y) {
ctx.beginPath();
ctx.arc(x, y, 1, 0, Math.PI * 2, true);
ctx.fill();
}
function clean() {
ctx.clearRect(0, 0, canvas.width, canvas.height); }
setInterval(function () {
clean();
line(pos.x);
rotate(); }, 10);
window.onload = ("load", init(), true);
</script>
</body>
</html>
Canvas实现文字粒子化，并且绕轴旋转（初号机）的更多相关文章
- Canvas实现文字粒子化，并且绕轴旋转（完善）
1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉. 2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动 a. HTML代码,定义c ...
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- canvas特效-文字粒子
具体的效果 https://www.ui.cn/detail/393461.html 实现类似的动效 要求: 1.文字内容可以自定义 2.粒子的运动轨迹 是曲线,返回是按照 原运动轨迹 3.粒子 堆叠 ...
- 随便谈谈用canvas来实现文字图片粒子化
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...
- 空间点绕轴旋转公式&程序(C++)
关键词:空间旋转.旋转轴 用途:相机位姿估计.无人机位姿估计.3D游戏.3D建模 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请搜索文献),C++函数展示 @Author:V ...
- PS 软件操作应用处理——粒子化任务效果
前 言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...
- canvas学习之粒子动画
项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
随机推荐
- C++ string 构造的陷阱
先看代码 #include<iostream> #include<string> using namespace std; int main(int argc, char ** ...
- PHP函数:PHP_SELF
php_self是php的内置变量,记作$php_self,其作用是实现“页内跳转”.这里的页内跳转不同等于html的书签之类的跳转,而是php程序通过URL的尾参数的改变在同一个程序里提供不同的We ...
- 600字读懂 Git
译注:来自 Hacker School 的 Mary Rose Cook 实现了一个纯 JavaScript 写就的 Git:Gitlet,包含了最主要的一些命令.这个项目一是为了了解 Git 内部原 ...
- [Oracle] Data Pump 详细使用教程（4）- network_link
[Oracle] Data Pump 详细使用教程(1)- 总览 [Oracle] Data Pump 详细使用教程(2)- 总览 [Oracle] Data Pump 详细使用教程(3)- 总览 [ ...
- Java HexString
byte[]和十六进制字符串相互转换 Java中byte用二进制表示占用8位,而我们知道16进制的每个字符需要用4位二进制位来表示. 所以我们就可以把每个byte转换成两个相应的16进制字符,即把by ...
- PullToRefreshListView调用onRefreshComplete方法 无法取消刷新的bug
我们在使用框架: PullToRefreshListView 实现下拉或者上拉加载时候,可能在上拉 完成时候,调用onRefreshComplete方法去 停止 刷新操作,但是,可能无效,测试产生 ...
- shell从函数文件里调用函数
碰到一个shell中函数调用的小问题,记录一下. shell中函数有三种调用方式,一种是在文件前面定义函数,然后在以下直接调用:一种是通过加载shell,在shell中直接调用:第三种是将函数写入文件 ...
- [转] Node.js 服务端实践之 GraphQL 初探
https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.n88wyan4e 0.问题来了 DT 时代,各种业 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- python-集合（第二篇（七）：集合）
第二篇(七):集合 python 集合 集合标准操作 摘要: 说明: ·类似于数学中学的集合,Python中的集合可以实现去重的功能,通过set()函数来实现: ·sets支持x in set, ...