用前端技术实现2d动画和特效(canvas)

1. 作品展示

下面是我实现的一个粒子效果，粒子在区域内随机生成并随机移动

参考代码

采用原生的h5 + css + js实现

2. 原理

1. 何为动画？连续的画面显示就是动画，特效也可以理解为动画。
2. 浏览器的页面看似静止，但它也有自己的刷新率，大概60帧每秒。
3. requestAnimationFrame()这个函数浏览器每次刷新就会调用。

 	function render() { // 渲染函数,每一帧如何渲染就写在这里
       .....
    }
    function update() { // 每一帧要执行的函数
        render();
        requestAnimationFrame(update);
    }
    function start() { // 当在html页面调用此方法时 粒子系统开始
        init(); // 相关数据初始化
        update();
    }

上面代码中的start函数一旦被调用，那么此后，render()函数每帧都会执行一次，每一帧显示的内容是什么就要写在这个函数里面。
既然要显示画面，那么就要有画布，也就是html5的canvas标签，可以理解为一个div，canvas的用法可自行百度，本人采用的是js动态创建的方法:

// 画布的初始化
 canvas = document.createElement("canvas");
 canvas.style.width =  choose.divWrapper.offsetWidth+ 'px';
 canvas.style.height =  choose.divWrapper.offsetHeight + 'px';
 canvas.width = choose.divWrapper.offsetWidth;
 canvas.height = choose.divWrapper.offsetHeight;
 context = canvas.getContext("2d");
 context.font = '20px bold'
 canvas.style.backgroundColor = "#f1f3f4";
 choose.divWrapper.appendChild(canvas);

绘制到canvas上

  function render() {
        context.clearRect(0, 0, canvas.width, canvas.height)// 清除上一帧
        for(i=0; i<particles.length; i++) { // 绘制每一个粒子
        context.beginPath();
        context.arc(particles[i].x, particles[i].y, particles[i].radius, 0, 2 * Math.PI, false);
        context.fillStyle = particles[i].color;
        context.fill();
        context.closePath();
    }

按照这个思想，很多简单的小动画和特效都可以实现