canvas可以说是html5其中的一大亮点，有了它，我们可以基于canvas画布实现很多之前只有flash和视频才能实现的效果。废话少说，先上效果。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=750, user-scalable=no">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>canvas结合三角函数实现一个视频直播效果</title>
- <style lang="">
- * {
- margin: 0;
- padding: 0;
- }
- html,
- body {
- font-size: 0;
- height: 100%;
- }
- canvas {
- background: #000;
- }
- </style>
- </head>
- <body>
- <canvas id='canvas'></canvas>
- <script>
- (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);
- </script>
- </body>
- </html>
技术总结：
先来简单回顾下高中的正弦曲线
我们会发现，图中的曲线和我们的效果是反着来的，所以我们要把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页面上，充分体现出了数学之美。希望大家在学习上遇到一些自己不懂的写法，一定要自己先去尝试，一定要自己尝试，还要要想尽办法应该到你们的项目中，这样我们印象才深刻。
经验首页