1. 之前有放过一个初始版本,但是因为在旋转的时候,有比较大的瑕疵,造成每个点运动到端点后,出现类似撞击的感觉。

2. 所以本文对旋转作了些调整,运用类似水平方向的圆周运动

a. HTML代码,定义canvas标签

<!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="particles"></canvas>
<script type="text/javascript" src="particle-main.js"></script>
</body>
</html>

b. js代码,实现文字转粒子,再进行运动的过程

var canvas, ctx;
canvas = document.getElementById("particles");
ctx = canvas.getContext("2d");
canvas.width = 230;
canvas.height = 230;
var dots = [];
var Dividingline = 110;
function init() {
xiezi();
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var y = 0; y < imgData.height; y += 3) {//y+=3,是因为如果按像素取,有效值非常多,所以这里就每隔3像素取一点
for (var x = 0; x < imgData.width; x += 3) {//y是高,x是宽
var i = (x + y * imgData.width) * 4;//这边就从左往右,从上往下;500X300的大小,会取166×100个像素点;×4则是因为rgba()
var dot = {
x: 0,
y: 0
};
if (imgData.data[i + 3] >= 228) {//因为img.data中包含了每个像素点的rgba,+3表示取a的值
dot.x = x;
dot.y = y;
dots.push(dot);//将每个满足条件的xy Add到dots数组中
}
}
fengexian();
//run();
}
} function xiezi() {
ctx.beginPath();
ctx.font = "50px Comic Sans MS";
ctx.fillText("SoDiSnI", 20, 100);
ctx.fill();
}
function drawparticles() {
for (var i = 0; i < dots.length; i++) {
var particle = dots[i];
ctx.beginPath();
ctx.arc(particle.x, particle.y, 1, 0, Math.PI * 2, true);
ctx.fill();
}
}
function fengexian() {
ctx.beginPath();
ctx.moveTo(Dividingline, 0);
ctx.lineTo(Dividingline, 230);
ctx.stroke();
}
var hudu = 0;
function run() {//主要利用弧度的特性,截取圆周运动的x坐标,可以理解为按圆周运动,但是y坐标不变,
//相对应的在平面上看起来,快到端点的时候运动慢,在中线附近就较快
if (hudu < 360) {
for (var i = 0; i < dots.length; i++) {
var particle = dots[i];
var newx=Math.cos(hudu) * (Dividingline - particle.x) + Dividingline;
ctx.beginPath();
ctx.arc(newx, particle.y, 1, 0, Math.PI * 2, true);
ctx.fill();
}
hudu+=0.1;//细化弧度,可以保证横坐标运动的间距小
}
else {
hudu = 0;
}
}
function clean() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
setInterval(function () {
clean();
run();
}, 50); init();

Canvas实现文字粒子化,并且绕轴旋转(完善)的更多相关文章

  1. Canvas实现文字粒子化,并且绕轴旋转(初号机)

    写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡. 注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调 ...

  2. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  3. canvas特效-文字粒子

    具体的效果 https://www.ui.cn/detail/393461.html 实现类似的动效 要求: 1.文字内容可以自定义 2.粒子的运动轨迹 是曲线,返回是按照 原运动轨迹 3.粒子 堆叠 ...

  4. 随便谈谈用canvas来实现文字图片粒子化

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.htm ...

  5. 空间点绕轴旋转公式&程序(C++)

    关键词:空间旋转.旋转轴 用途:相机位姿估计.无人机位姿估计.3D游戏.3D建模 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请搜索文献),C++函数展示 @Author:V ...

  6. PS 软件操作应用处理——粒子化任务效果

      前  言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...

  7. canvas学习之粒子动画

    项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...

  8. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  9. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

随机推荐

  1. 关于响应事件中的Sender

    很多响应事件都会有个参数就是Sender,如下: - (IBAction)updateSliderValue:(id)sender Sender其实就是触发响应的那个实例对象,比如这个消息是由一个UI ...

  2. Bzoj 1696: [Usaco2007 Feb]Building A New Barn新牛舍 中位数,数学

    1696: [Usaco2007 Feb]Building A New Barn新牛舍 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 394  Solve ...

  3. 爬虫技术浅析 | WooYun知识库

    爬虫技术浅析 | WooYun知识库 爬虫技术浅析 好房通ERP | 房产中介软件最高水准领导者 undefined

  4. Abator自动生成ibatis的相关配置和类

      一.abator自动生成配置: abator自动生成ibatis的配置文件.mode.sqlMap.dao.bean实例 准备: 1.安装Eclipse插件:      要求eclipse3.1, ...

  5. POJ 1001 Exponentiation 无限大数的指数乘法 题解

    POJ做的非常好,本题就是要求一个无限位大的指数乘法结果. 要求基础:无限大数位相乘 额外要求:处理特殊情况的能力 -- 关键是考这个能力了. 所以本题的用例特别重要,再聪明的人也会疏忽某些用例的. ...

  6. 在LINUX中跟踪函数调用----http://stackoverflow.com/

    http://stackoverflow.com/questions/311840/tool-to-trace-local-function-calls-in-linux I am looking f ...

  7. MySQL Handling of GROUP BY--官方文档

    In standard SQL, a query that includes a GROUP BY clause cannot refer to nonaggregated columns in th ...

  8. javascript新的原生态API

    以下是最新的w3c标准的javascript,目前支持运行在firefox, chrome,IE9以上版本的浏览器 参考资料:https://developer.mozilla.org/ru/docs ...

  9. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

  10. TypeScript笔记[5]泛型+Dictionary 转

    TypeScript笔记[5]泛型   在C++.C#.Java等主流编程语言中,一般对泛型编程提供了支持.合理利用泛型,可以提高开发效率.提升代码质量. 例如在C++编程语言中,常常利用下面的结构表 ...