particleground源码阅读笔记 | 轻量级canvas粒子插件

发表于 2017-01-07 | 分类于 WEB前端 | | 阅读次数

首先可以来看下这个插件的demo：https://jnicol.github.io/particleground/
一种比较常见的粒子背景，有连线，有3d视差效果。
代码：github地址

源代码很短，本文也算不上啥解析文章，只是阅读笔记。

1.基本的粒子动画原理

在canvas画布上绘制复数实心圆点即粒子，每个粒子都有它的粒子对象实例，用于记录它的大小、位置信息以及速度，通过timeout来更新粒子的位置形成粒子动画。大概类似下面这样：

var allParticles = [];
// 初始化粒子
for(var i = 0; i < 100; i++) {
    var p = new Particle();
    allParticles.push(p);
}
setTimeout(function() {
    allParticles.forEach(function(item) {
        // 更新粒子位置
        item.update();
    });
    // 根据各个粒子的位置绘制到canvas上
    draw(allParticles);
}, 30);

阅读全文 »

博客迁移基本完成，纪念下坑掉的老blog

发表于 2016-11-27 | 分类于 WEB前端 | | 阅读次数

1.技术栈对比

现在

使用基于hexo的静态博客，本地是hexo搭建的动态页面，部署时使用自带命令生成静态html文件，之后push到github后通过gitpage呈现。文章书写主要依靠markdown和html。

静态博客，免费服务器，免费域名lenrinfvck.github.io。
虽然是静态页面，但是可以借由很多第三方云服务使用一些动态功能呢，如回复统计一类的。

以前

自己使用 node+express+mongodb，部署在阿里云服务器上，linux主机预装centOS的裸机。所有动态数据存入数据库动态展示，文章使用了动态编译markdown的形式，同时也自行构建了一些语法功能，如嵌入标签分类和时期等。

代码部署在coding的git上，使用webhook自动同步到服务器。

动态博客，阿里云计流量28.8元/月，域名lenrinfvck.cn (服务器到期) 39元/年，维护博客本身就很烦，更难得写文章。忙起来后就没咋弄了，坑掉了。

阅读全文 »

git代码自动部署，coding中webhook使用

发表于 2016-01-19 | 分类于 WEB前端 | | 阅读次数

环境：
NodeJs: 4.0+
git: 1.8+
官方说明: webhook说明

工作原理

基于git的githook功能，coding提供的webhook服务，github也有类似服务。
监听对远程仓库的操作，执行相应操作，此处webhook提供的处理是发送一个http请求到指定url地址。这时就可以在部署服务器上开个路由监听这个地址的访问，如果是coding发出的，则git pull拉去代码，并重启服务等。