canvas結合三角函數(shù)實現(xiàn)一個視頻直播效果

anvas可以說是html5其中的一大亮點，有了它，我們可以基于canvas畫布實現(xiàn)很多之前只有flash和視頻才能實現(xiàn)的效果。廢話少說，先上效果。

<!DOCTYPE html>
<html lang="en">
<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結合三角函數(shù)實現(xiàn)一個視頻直播效果</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軸上的速度，下面要通過三角函數(shù)來實現(xiàn)。
 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 發(fā)生了變化，請注意哦，因為出現(xiàn)了function 哦
 requestAnimationFrame(render);

 _this.context.clearRect(0,0,_this.viewW,_this.viewH);
 _this.particals.forEach(partical=> {
 partical.animate();
 })
 })();
 }
 };
 zmitiUtil.init();
 })(document);
 </script>
</body>
</html>

技術總結：

先來簡單回顧下高中的正弦曲線

我們會發(fā)現(xiàn)，圖中的曲線和我們的效果是反著來的，所以我們要把x,y對應的調(diào)換下位置即可，運動起來就會在X軸的速度上體現(xiàn)出來了。具體可參考下源代碼。
簡單的解釋下 this.speedX=4* Math.sin(this.angle/180*Math.PI); this.angle為當前的角度，取值范圍為：[0,360],js提供的三角函數(shù)是要接收一下弧度的，所以我們需要轉一下。
解釋 this.angle=Math.random() * 360 | 0; // 有的可能不太知道后面的 ”| 0“是什么意思，本屌之前也不知道是什么意思，自己試，多試幾次，于是就知道了，這個是去掉了小數(shù)的部分，相當于 Math.floor() , 但要問這是什么原理，好像是二進制的算法，其實我也不知道，但我知道這個用法就行了。
注意下這個代碼里在的有幾個地方涉及到了this的指向問題哦。我在代碼中已有注釋。
像這種粒子動畫的實現(xiàn)原理，先實現(xiàn)一個粒子的動畫，然后循環(huán)生成一堆，把所有的push到一個數(shù)組中去。然后用動畫函數(shù)遍歷數(shù)組，執(zhí)行數(shù)組中的每一個對象的運動函數(shù)。
html5 canvas 畫布一是無狀態(tài)的機制。像類似 context 的 globalAlpha，translate,rotate等一些屬性在操作之前需要加上context.save();在后面再context.restore();代碼中也有體現(xiàn)。如果我們不加上context.save()那么，會給所有的粒子都設置了相同的透明試，這可不是我想要的。
ES6的類的創(chuàng)建，解構賦值。

寫在最后：

我們可以看到很漂亮的數(shù)學曲線，應用到web頁面上，充分體現(xiàn)出了數(shù)學之美。希望大家在學習上遇到一些自己不懂的寫法，一定要自己先去嘗試，一定要自己嘗試，還要要想盡辦法應該到你們的項目中，這樣我們印象才深刻。

節(jié)主要簡單講解canvas、svg、地理定位和新語義元素

HTML 5 Canvas

canvas 元素用于在網(wǎng)頁上繪制圖形。HTML5 的 canvas 元素使JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");返回一個用于在畫布上繪圖的環(huán)境，目前僅支持2d，
cxt.fillStyle="#FF0000";//染成紅色
cxt.fillRect(0,0,150,75);//fillRect 方法規(guī)定了形狀、位置和尺寸
</script>

什么蘋果發(fā)布會經(jīng)常讓人為之瘋狂？演講人的口才固然重要，可好馬還需配好鞍，展示設計也是關鍵。

蘋果多年來一直用基本一模一樣的Keynote模板做Pre（展示），前幾天的2016年春季蘋果發(fā)布會上，大屏幕的演示格調(diào)并沒有多大變化——深色漸變底加白字、聚焦式的動畫。不復雜，但依然富有魅力。

在此通過3種簡單的動態(tài)特效（而且每個人都可以輕易學會），來探索設計多媒體交互，能為展示帶來什么樣的神奇效果。

1、延時，60秒做出生長的效果

如果你準備發(fā)布Apple Watch，如何在5秒內(nèi)立刻抓住人們的眼球？一個簡單卻實用的方法是讓產(chǎn)品細節(jié)分步呈現(xiàn)出來，形成組裝產(chǎn)品的生長效果。

大部分產(chǎn)品有PSD格式的原型圖，設計精美但細節(jié)繁多，導入PPT等軟件進行動效處理十分麻煩。如上圖，利用iH5本周發(fā)布的新功能，能在保留所有分層結構的前提下一次性導入PSD，快速制造延時的動效。

把PSD文件拖拽到編輯器進行上傳，再為產(chǎn)品的部件分別添加飛入、彈跳等動效、設置動效在不同時間出現(xiàn)，就能模擬出產(chǎn)品的“生長情況”。

KEY#1：動效的延遲一開始可以控制在1-3秒，后面的間隔越來越短（并低于動效時長），還能形成重疊的動感，有利于制造現(xiàn)場的張緊感。

2、聚焦，Duang一樣的特技

“怎么讓觀眾把注意力集中到我想要讓他們看的地方？”聚焦有兩個技巧，一是把你想要突出的內(nèi)容放大，二是隱藏不重要的內(nèi)容。

著名的展示工具Prezi用的就是第一個法子，實時放大展示重點。但它應用還不廣，每到一個地方得重裝一次，功能也比較有限。如上圖，iH5上周推出的畫布工具，有用來設計好玩的“聚焦”特技的遮罩功能，能在普通瀏覽器中進行在線展示。

在畫布下放兩張圖片，一張展示圖，一張PNG格式的白色蘋果LOGO，把展示圖的遮罩設為蘋果LOGO，就有上圖的效果。容易吧？如果再為圖片放一個向左滑動的效果，還能制造漂移的動感。

KEY#2：畫布的遮罩效果和設為遮罩的圖片息息相關，作為遮罩的圖片色彩越明亮，被遮的圖片越不透明。

因為作為遮罩的蘋果LOGO是全白的，它顯示區(qū)域內(nèi)的圖片才是完全不透明的。比如上面從白色到黑色的四個圓是遮罩，它的顏色越深，城堡圖片對應位置的透明度越低。遮罩全黑時，城堡就不見了。

（注：國內(nèi)很多移動端瀏覽器尚未支持HTML5的Canvas遮罩效果，所以它目前更適用于PC端展示。）

3、演示，是調(diào)節(jié)氣氛的步伐

如果想要設計一場毫無缺漏的發(fā)布會，直接搞一場錄播就行，但也失去了現(xiàn)場的魅力。因為可能會出現(xiàn)各種突發(fā)情況，現(xiàn)場才更刺激、更有吸引力。怎樣能在展示中加入可控的“變量”來調(diào)節(jié)氣氛？

答案之一是演示，而且最好是用一些讓觀眾自己上臺，同樣能輕易完成的行為。電腦上的比如簡單的拖動，如上圖，利用有趣的遮罩結合拖動來展示不同型號的蘋果手機。

這里應用到了遮罩強悍的“濾鏡”功能，設置很簡單，只是把剛才的白色蘋果LOGO做成了彩色漸變，再用一張?zhí)O果手機的圖片作為彩色LOGO的遮罩。這樣一來，相當于保留了LOGO的顏色特征，又能利用蘋果手機圖片的色彩明暗變化讓LOGO現(xiàn)出蘋果手機的“原形”。

這時候，把蘋果LOGO圖片的“拖動類型”設為任何方向，就能在展示中途隨意用鼠標拖移蘋果LOGO，演示為蘋果手機加彩色濾鏡的特技了。

KEY#3：想要實現(xiàn)Prezi的聚焦放大效果？用iH5的事件工具，在一張允許拖動的圖片上放個透明按鈕，設置點擊按鈕時圖片尺寸放大就行。

“除非你有值得一說的東西，不然你就做不了一個好的演講。”

全球赫赫有名的TED大會，靠演講為世界傳播了各種各樣的創(chuàng)意。而作為TED多年的策展人Chris Anderson，有著上面這句名言。

有了值得一說的東西，是否有足夠好的演講手段，是史蒂夫·喬布斯和蒂姆·庫克在蘋果發(fā)布會上反響的區(qū)別。你更欣賞喬布斯還是庫克？現(xiàn)在，你還要錯過用動態(tài)展示抓住觀眾注意力的機會嗎？

在線咨詢

上一篇：Exchange 郵箱遷移的最佳工具：Stellar
下一篇：Cocos 2d-JS中文版API文檔正式上線

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

canvas結合三角函數(shù)實現(xiàn)一個視頻直播效果

節(jié)主要簡單講解canvas、svg、地理定位和新語義元素

HTML 5 Canvas

您的項目需求