canvas可以说是html5其中的一大亮点，有了它，我们可以基于canvas画布实现很多之前只有flash和视频才能实现的效果。废话少说，先上效果。
canvas结合三角函数实现一个视频直播效果
* {
margin: 0;
padding: 0;
}
html,
body {
font-size: 0;
height: 100%;
}
canvas {
background: #000;
}
(function (document) {
class Point {
constructor(option) {
this.x = option.context.canvas.width / 1.5;//对象的X坐标
this.y = Math.random() * option.context.canvas.height/2 + option.context.canvas.height / 2 ;//对象的Y坐标
this.defaultX = this.x;
this.defaultY = this.y;
this.img = option.img;
this.angle = Math.random()*360 | 0;
this.context = option.context;
this.width = this.context.canvas.width;
this.height = this.context.canvas.height;
this.speedX = 0;//元素在x轴上的速度，下面要通过三角函数来实现。
this.speedY = -4* Math.random() - 8;
this.alpha = 1;
this.render();
}
render() {
var {
context,
img,
x,
y
} = this;
context.save();
context.globalAlpha = this.alpha ;
context.drawImage(img, x, y,img.width/2,img.height/2);
context.restore();
}
animate() {
this.angle +=3;
this.angle %= 360;
this.speedX = 4* Math.sin(this.angle/180*Math.PI*2);
this.x += this.speedX;
this.y += this.speedY;
var {width,height} = this;
this.alpha = this.y / height / 2 + .2;
if (Math.abs(this.y <= height / 2)) {
this.y = height;
this.angle = Math.random() * 360 | 0;
this.alpha = 1;
this.x = this.defaultX;
}
this.render();
}
}
var zmitiUtil = {
viewW: window.innerWidth,
viewH: window.innerHeight,
init() {
this.setSize();
this.createParticals();
this.animate();
},
setSize() {
this.canvas = document.querySelector('#canvas');
this.context = this.canvas.getContext('2d');
this.canvas.width = this.viewW;
this.canvas.height = this.viewH;
},
createParticals(){
this.particals = [];
var img = new Image();
var self = this;
img.onload = function(){
var _this = this;//这里面this指向的是img对象
for (var i = 0; i < 30; i++) {
self.particals.push(new Point({
img: _this,
context: self.context
}))
}
}
img.src = './images/heart.png';
},
animate(){
var _this = this;
(function render(){//这里面this 发生了变化，请注意哦，因为出现了function 哦
requestAnimationFrame(render);
_this.context.clearRect(0,0,_this.viewW,_this.viewH);
_this.particals.forEach(partical => {
partical.animate();
})
})();
}
};
zmitiUtil.init();
})(document);
技术总结：
先来简单回顾下高中的正弦曲线
我们会发现，图中的曲线和我们的效果是反着来的，所以我们要把x,y对应的调换下位置即可，运动起来就会在X轴的速度上体现出来了。具体可参考下源代码。
简单的解释下 this.speedX = 4* Math.sin(this.angle/180*Math.PI); this.angle为当前的角度，取值范围为：[0,360],js提供的三角函数是要接收一下弧度的，所以我们需要转一下。
解释 this.angle = Math.random() * 360 | 0; // 有的可能不太知道后面的 ”| 0“是什么意思，本屌之前也不知道是什么意思，自己试，多试几次，于是就知道了，这个是去掉了小数的部分，相当于 Math.floor() , 但要问这是什么原理，好像是二进制的算法，其实我也不知道，但我知道这个用法就行了。
注意下这个代码里在的有几个地方涉及到了this的指向问题哦。我在代码中已有注释。
像这种粒子动画的实现原理，先实现一个粒子的动画，然后循环生成一堆，把所有的push到一个数组中去。然后用动画函数遍历数组，执行数组中的每一个对象的运动函数。
html5 canvas 画布一是无状态的机制。像类似 context 的 globalAlpha，translate,rotate等一些属性在操作之前需要加上context.save();在后面再context.restore();代码中也有体现。如果我们不加上context.save()那么，会给所有的粒子都设置了相同的透明试，这可不是我想要的。
ES6的类的创建，解构赋值。
写在最后：
我们可以看到很漂亮的数学曲线，应用到web页面上，充分体现出了数学之美。希望大家在学习上遇到一些自己不懂的写法，一定要自己先去尝试，一定要自己尝试，还要要想尽办法应该到你们的项目中，这样我们印象才深刻。