教程

目录：

1. 绘制静态粒子图形效果

2. 添加静态粒子动画效果

3. 添加粒子碰撞动画效果

4. 添加粒子四面碰撞效果

基础要求：

1. 了解基础HTML标签，例如canvas标签

2. 了解Javascript的基础知识

第一步： 生成静态粒子图形

生成静态粒子图形，我们将会使用到Canvas的如下相关方法：

context.fillRect(x, y, width, height);

context.arc(x, y, r, sAngle, eAngle, counterclockwise);

其中，使用fillRect方法生成了整个动画场景，布满了画布全部区域，再使用arc方法来生成一个圆形，arc方法本身用来生成圆弧，但是如果生成一个360度的圆弧的话，就自然生成了圆形，完整代码如下：

var canvas = document.getElementById('gbcanvas'),

context = canvas.getContext('2d');

var posX = 30, //定义圆心X坐标

posY = 30, //定义圆心Y坐标

particleRadius = 30; //定义半径

context.fillStyle = '#E4E4E4';

context.fillRect(0,0,canvas.width,canvas.height); //生成画布背景色

context.beginPath;

context.fillStyle = '#dd4814';

context.arc(posX, posY, particleRadius, 0 , Math.PI*2, true);

context.closePath;

context.fill;

在线演示&调试地址

http://www.igeekbar.com/igclass/code/5392196c-400d-466c-b0cb-647bbc3469cc.htm

第二步： 生成粒子运行效果

动画效果原理：

HTML5 画布动画生成原理，本质来说实现方式就是每隔固定时间段重新绘制画布内的图形，如下是代码：

var canvas = document.getElementById('gbcanvas'),

context = canvas.getContext('2d'),

posX = 30,

posY = 30,

particleRadius = 30;

//定义setInterval来隔特定时间生成粒子，如下

setInterval(function{

//为了能够生成粒子移动效果，我们需要在每次绘制粒子之前清楚界面里的绘图

context.fillStyle = '#E4E4E4';

context.fillRect(0,0,canvas.width,canvas.height); //使用背景色填充

posX+=2;

posY+=1;

context.arc(posX, posY, particleRadius, 0, Math.PI*2, true);

}, 10);

以上代码我们使用fillRect方法来先将整个背景色重新填充，再使用arc方法重新绘制圆形，来生成移动的效果

在线演示&调试地址

http://www.igeekbar.com/igclass/code/d2ff678f-23f1-4cab-9eba-9898d4393017.htm

第三步： 生成粒子碰撞效果

使用HTML5画布生成一个粒子碰撞地面效果，并且同时添加相关重力加速度效果。

首先定义粒子x轴和y轴的运动速度及重力加速度，如下：

speedX = 10, //定义一个X轴方向的速度

speedY = 10, //定义一个Y轴方向的速度

gravity = 1; //定义一个重力的参数，即重力加速度

然后，设置粒子运动速度，即每次绘制粒子圆心坐标的变化，如下：

//以下代码设置运动速度

posX+=speedX;

posY+=speedY;

同时，保证Y轴拥有一个加速度效果，如下：

//添加重力加速度效果

speedY+=gravity;

最后，我们添加一个地面碰撞效果，判断当粒子的中心Y轴低于canvas的高度减去粒子半径，即粒子部分区域低于画布最低端的时候，重新定义粒子的位置，如下：

//接下来我们添加地面反弹效果，只需要判断当粒子运动到近画布底端的时候，粒子Y轴坐标反向

if(posY > canvas.height - particleRadius){

speedY*=-0.5; //这里设置粒子速度为负值，修改此数值可以修改粒子Y轴运动速度损耗量

speedX*=0.5; //这里设置粒子X轴速度的损耗量

posY = canvas.height - particleRadius; //这里当粒子低于画布最低端的时候，设置保证其不消失

}

在线演示&调试地址

http://www.igeekbar.com/igclass/code/8a3cfeb7-b052-4bf7-b3b1-8ec4e59584af.htm

第四步： 生成四面碰壁粒子效果

上面我们生成了粒子碰撞地面效果，本节我们添加粒子四面碰壁效果，基本代码如下：

//判断粒子位于画布右侧可显示区域外

if(posX > canvas.width - particleRadius){

speedX*=-1;

posX = canvas.width - particleRadius;

}

//判断粒子位于画布左侧可显示区域外

if(posX < particleRadius){

speedX*=-1;

posX = particleRadius;

}

//最后添加顶端的反弹效果

if(posY < particleRadius){

speedY*=-1;

posY = particleRadius;

}

大家可以看到，代码基本和碰撞地面效果类似，只不过判断粒子中心所处的坐标位置来修改粒子运动的方向。

在线演示&调试地址

http://www.igeekbar.com/igclass/code/87784219-f527-4f52-bfb2-62cd82bbc07d.htm

Done！以上就是几个HTML5实现粒子物理碰撞的例子， 希望大家能够觉得有用， 有任何问题，请给我留言哈

前Google标榜自己不作恶的企业价值观，但是Google在追踪用户，收集用户信息这件事上面又是臭名昭著，让灿辉很难再去相信任何一个商业巨头的“不作恶”了。

这里跟大家一起来分享一个“邪恶”的追踪用户的技（shou）术（duan），为什么说邪恶呢，因为这个跟踪技术就像一块牛皮糖，即使你不登录，哪怕你卸载重装浏览器，他可能还能追踪到你，因为这个指纹是基于你的设备的一些硬件信息来生成的，基本上如果你的设备不更换，大概率可以确保指纹不变，从而持续追踪你，而且是跨网站追踪。

接下来灿辉详细给大家说说这个浏览器指纹（browser fingerprint）

浏览器指纹追踪

类似人的外貌和指纹，Web客户端（这里主要指浏览器）也有多种“外貌”信息和“指纹”信息，将这些信息综合分析计算后，可对客户端进行唯一性识别，进而锁定、追踪、了解网民行为和隐私数据。

基本指纹

基本指纹是任何浏览器都具有的特征标识，比如硬件类型（Apple）、操作系统（Mac OS）、用户代理（User agent）、系统字体、语言、屏幕分辨率、浏览器插件 (Flash, Silverlight, Java, etc)、浏览器扩展、浏览器设置 (Do-Not-Track, etc)、时区差（Browser GMT Offset）等众多信息，这些指纹信息“类似”人类的身高、年龄等，有很大的冲突概率，只能作为辅助识别。可以在该网址进行查看本地浏览器的基本特征，https://www.whatismybrowser.com/

2) 高级指纹

基本指纹就像是人的外貌特征，外貌可以用男女、身高、体重区分，然而这些特征不能对某个人进行唯一性标识，仅使用基本指纹也无法对客户端进行唯一性判定，基于HTML5的诸多高级指纹对此提供了新思路。

①、Canvas指纹

说到高级指纹，不得不提Canvas指纹，Canvas（画布）是HTML5中一种动态绘图的标签，可以使用其生成甚至处理高级图片。2014年9月，ProPublica报道：新型的Canvas指纹追踪正在被用到“上到白宫，下到YouPorn”等众多网站，事实上早在2012年已有研究报告[6]分析称canvas指纹被用于跟踪用户。

利用Canvas进行追踪的一般过程大致如下：

基于Canvas标签绘制特定内容的图片，使用canvas.toDataURL()方法获得图片内容的base64编码（对于PNG格式的图片，以块(chunk)划分，最后一块是32位CRC校验）作为唯一性标识，如下图。

②、AudioContext指纹

HTML5提供给JavaScript编程用的Audio API则让开发者有能力在代码中直接操作原始的音频流数据，对其进行任意生成、加工、再造，诸如提高音色，改变音调，音频分割等多种操作，甚至可称为网页版的Adobe Audition。

AudioContext指纹原理大致如下：

方法一：生成音频信息流(三角波)，对其进行FFT变换，计算SHA值作为指纹，音频输出到音频设备之前进行清除，用户毫无察觉。

AudioContext指纹基本原理：

主机或浏览器硬件或软件的细微差别，导致音频信号的处理上的差异，相同器上的同款浏览器产生相同的音频输出，不同机器或不同浏览器产生的音频输出会存在差异。

从上可以看出AudioContext和Canvas指纹原理很类似，都是利用硬件或软件的差异，前者生成音频，后者生成图片，然后计算得到不同哈希值来作为标识。音频指纹测试地址：

https://audiofingerprint.openwpm.com/

还有一些动态检测，比如运行js，通过flash插件对浏览器或者底层操作系统的唯一信息进行访问。

3) 硬件指纹

硬件指纹主要通过检测硬件模块获取信息，作为对基于软件的指纹的补充，主要的硬件模块有：GPU’s clock frequency、Camera、Speakers/Microphone、Motion sensors、GPS、Battery等。

JavaScript 行为

上面的描述看起来主要是网络层面上的工作，但其实在浏览里的 JavaScript 范畴内，同样有大量的信息可供采集。

要想编程控制 Web 页面的 UI 与行为，我们必须使用 JavaScript 来操作 DOM。而稍有经验的前端同学们都知道，DOM 是挂载了非常多属性而非常沉重的。这也就意味着，DOM 中存储了大量关于浏览器的敏感信息：User-Agent、系统架构、系统语言、本地时间、时区、屏幕分辨率……而对于 HTML5 中新加入的形如电量、加速度计、信息、Timing 等特性的 API，不要说检测它们的具体值是多少，光是检测这些 API 的存在性，信息量就非常大了。而对这些属性的检测难度有多低呢？我们只需要在 JavaScript 中访问 navigator.xxx 属性，就可以轻易地获得一个浏览器的「身高、体重、血型、星座……」了。

当然了，现代浏览器为了避免一些敏感的 DOM 属性泄露，会使用一些安全策略来限制一些属性的访问。但对于 fingerprinting 的场景来说，有些安全策略和掩耳盗铃差不多。

跨浏览器指纹

上述指纹都是基于浏览器进行的，同一台电脑的不同浏览器具有不同的指纹信息。这样造成的结果是，当同一用户使用同一台电脑的不同浏览器时，服务方收集到的浏览器指纹信息不同，无法将该用户进行唯一性识别，进而无法有效分析改用户的的行为。

近期有学者研究了一种跨浏览器的浏览器指纹，其依赖于浏览器与操作系统和硬件底层进行交互进而分析计算出指纹，这种指纹对于同一台电脑的不同浏览器也是相同的。更多技术细节请参考：

http://yinzhicao.org/TrackingFree/crossbrowsertracking_NDSS17.pdf

3. WebRTC

WebRTC（网页实时通信，Web Real Time Communication），是一个开源项目，旨在使得浏览器能为实时通信（RTC）提供简单的JavaScript接口，说的简单明了一点就是让浏览器提供JS的即时通信接口，让浏览器实时获取和交换视频、音频和数据。WebRTC实现了三个API，分别是:

MediaStream：通过MediaStream的API能够通过设备的摄像头及麦克风获得视频、音频的同步流。

RTCPeerConnection：RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件。

RTCDataChannel：RTCDataChannel使得浏览器之间（点对点）建立一个高吞吐量、低延时的信道，用于传输任意数据。

基于WebRTC的实时通讯功能，可以获取客户端的IP地址，包括本地内网地址和公网地址。

综合指纹

Web世界的指纹碰撞不可避免，最终将上述所有的基本指纹和多种高级指纹综合利用，进行分析、计算哈希值作为综合指纹，可以大大降低碰撞率，极大提高客户端唯一性识别的准确性。测试地址：https://panopticlick.eff.org/ 以及：https://amiunique.org/fp

总结

科技公司通过大数据，会对你进行一个大体的画像，然后按照你的喜好推送信息。

• 比如一些精准的广告，刺激你荷尔蒙的小视频等。
• 就拿你在玩的抖音来说，你其实可以匿名使用，但是你爱抖胸妹子的喜好，不会因为重装抖音而消失，它已熟知了你的癖好。
• 这些收集你浏览器信息的动作，默默的在后台发生，用户根本毫无觉察。
• 你的每一次点击，都无情的出卖了你，这些信息会被综合分析，相关网站和部门，能够对你进行唯一性识别，进而锁定、追踪。
• 你虽然没有注册账号，平台却为你分配了身份。
• 这是识别方式，用于识别你这个个体，而收集的内容，可能更让人瞠目结舌，不要觉得垃圾数据多，存不下，行为数据比那些廉价的磁盘，值钱的多。
• 包括你的每一次点击，停留的时长，阅读、观看的位置，都在全方位的展示你的个体。
• 设备、IP、位置、操作习惯，都在不同的角度绘制你的指纹，让你在匿名的互联网上，无处可藏。

如果你没有足够专业的知识或者非常频繁更换浏览器信息的话，几乎 100% 可以通过浏览器指纹定位到一个用户。

怎么样，这种浏览器指纹追踪技术够邪恶吧，映射到现实世界，相当于自动基于这个人身上的一些不可变信息，给每个人赋予一个独特的特征指纹，基于这个指纹来追踪一个用户所有的轨迹。

当然对付这种邪恶的技术，我们也不是束手就擒，在搞明白了它的追踪原理之后，我们就有一些技巧和隐私保护神器来让这些浏览器指纹追踪失效，接下来的后续文章里面，灿辉再给大家介绍一些简单易行的隐私保护方法，请关注我的帐号，如果文章写得好，不妨点赞、转发、评论三连，在此谢谢。