整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是皮皮。
我們會看到很多網頁的粒子特效；如上圖所示，這些都是借助HTML新特性，使用新增標簽Canvas得到的效果；那么我們來了解下canvas。
在 MDN 中是這樣定義 <canvas> 的：
<canvas> 是 HTML5 新增的元素，可用于通過使用 JavaScript 中的腳本來繪制圖形。例如，它可以用于繪制圖形、制作照片、創建動畫，甚至可以進行實時視頻處理或渲染。
這里需要劃重點的是，<canvas> 只是一個畫布，本身并不具有繪圖的能力，繪圖必須使用 JavaScript 等腳本語言。
<canvas> 標簽允許腳本語言動態渲染位圖像。<canvas> 標簽創建出了一個可繪制區域，JavaScript 代碼可以通過一套完整的繪圖功能類似于其他通用二維的 API 訪問該區域，從而生成動態的圖形。
我們可以認為 <canvas> 標簽只是一個矩形的畫布。JavaScript 就是畫筆，負責在畫布上畫畫。
在互聯網出現的早期，Web 只不過是靜態文本和鏈接的集合。1993 年，有人提出了 img 標簽，它可以用來嵌入圖像。
由于互聯網的發展越來越迅猛，Web 應用已經從 Web 文檔發展到 Web 應用程序。但是圖像一直是靜態的，人們越來越希望在其網站和應用程序中使用動態媒體（如音頻、視頻和交互式動畫等），于是 Flash 就出現了。
但是隨著 Web 應用的發展，出現了 HTML5，在 HTML5 中，瀏覽器中的媒體元素大受青睞。包括出現新的 Audio 和 Video 標簽，可以直接將音頻和視頻資源放在 Web 上，而不需要其他第三方。
其次就是為了解決只能在 Web 頁面中顯示靜態圖片的問題，出現了 Canvas 標簽。它是一個繪圖表面，包含一組豐富的 JavaScript API，這些 API 使你能夠動態創建和操作圖像及動畫。img 對靜態圖形內容起到了哪些作用，Canvas 就可能對可編寫腳本的動態內容起到哪些作用。
了解了canvas之后，我們使用新標簽搭配原生JS，實現一個簡單的頁面特效 ------ 鼠標滑動效果，如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
頁面非常簡單，只需要一個簡單的canvas標簽即可；
樣式設置
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#myCanvas {
background-color: #000; /* 黑色 */
}
初始化設置
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
var starlist = [];
function init() {
// 設置canvas區域的范圍為整個頁面
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
};
init();
監聽
window.onresize = init; // 監聽屏幕大小改變 重新為canvas大小賦值
移動事件
// 當鼠標移動時 將鼠標坐標傳入構造函數 同時創建一個對象
myCanvas.addEventListener('mousemove', function (e) {
// 將對象push到數組中，畫出來的彩色小點可以看作每一個對象中記錄著信息 然后存在數組中
starlist.push(new Star(e.offsetX, e.offsetY));
});
隨機函數
// 隨機函數封裝,設置坐標
function random(min, max) {
// 設置生成隨機數公式
return Math.floor((max - min) * Math.random() + min);
};
對象構造
// 定義了一個構造函數進行對象構造
function Star(x, y) {
// 將坐標存在每一個點的對象中
this.x = x;
this.y = y;
// 設置隨機偏移量
this.vx = (Math.random() - 0.5) * 3;
this.vy = (Math.random() - 0.5) * 3;
this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
this.a = 1; // 初始透明度
this.draw(); // 把對象繪制到頁面
}
方法封裝
//star對象原型上封裝方法
Star.prototype = {
// canvas根據數組中存在的每一個對象的小點信息開始畫
draw: function () {
ctx.beginPath();
ctx.fillStyle = this.color;
// 圖像覆蓋 顯示方式 lighter 會將覆蓋部分的顏色重疊顯示出來
ctx.globalCompositeOperation = 'lighter'
ctx.globalAlpha = this.a;
ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
ctx.fill();
this.updata();
},
updata() {
// 根據偏移量更新每一個小點的位置
this.x += this.vx;
this.y += this.vy;
// 透明度越來越小
this.a *= 0.98;
}
}
渲染
// 將小球渲染到頁面上
function render() {
// 每一次根據改變后數組中的元素進行畫圓圈 把原來的內容區域清除掉
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
// 根據存在數組中的每一位對象中的信息畫圓
starlist.forEach(function (ele, i) {
ele.draw();
// 如果數組中存在透明度小的對象 ，給他去掉 效果展示逐漸消失
if (ele.a < 0.05) {
starlist.splice(i, 1);
}
});
requestAnimationFrame(render);
}
render();
本文我們首先了解了粒子特效，它大多數是HTML的新特性，使用canvas標簽創建出來的，或者說是繪制吧，canvas是畫布，但是還需要搭配js來構造動態效果，創建出好看的特效。總而言之，canvas的出現使得前端頁面變得更加豐富多彩，提高了視覺效果，對于用戶體驗進行了適當的增強，感興趣的小伙伴可以去嘗試下，鼠標滑動效果特效。
小伙伴們，快快用實踐一下吧！如果在學習過程中，有遇到任何問題，歡迎加我好友，我拉你進Python學習交流群共同探討學習。
源：太平洋電腦網
最近，關于Flash死亡的話題又再次引起了熱議。早前Flash Player的東家Adobe就已經確認，將會在2020年12月31日徹底停止支持Flash Player，Flash Player迎來生命終點（EOL）。Adobe在其官網上確認，Flash Player將不再獲得任何包括安全更新在內的技術支持，用戶應該在EOL日期之前卸載Flash。
Flash將停止運營，但中國特供版除外？
然而，Adobe同時在新浪微博上表示，Adobe將會繼續與重橙網絡合作并支持其在中國大陸地區對Flash Player的獨家發行與維護，該合作僅限中國大陸地區。換言之，Flash Player特別為中國制作了一個“特供版”，這到底是個怎么樣的存在？值不值得繼續使用？今天就來談談吧。
Flash Player為何要迎來終結？
作為曾經網絡上的大紅人，Flash Player退役終究是一件令人唏噓的事情。在早年，FlashFlash誕生于1996年，為仍處于雛形的互聯網帶來了更豐富的交互、更多樣的色彩、更動感的視覺，是否使用Flash，甚至一度成為網頁是否先進的標準——看看多少網頁開發的書籍都是Flash教程，就能得以一窺Flash當年的江湖地位。
服務13億用戶的口號，還是名副其實的
然而，時代在變遷，Flash Player已經難以在移動互聯網時代繼續高歌猛進。當你蘋果iOS首度吹響了拋棄Flash Player的號角，喬布斯當年為此甚至發布了一封“Flash 之我見（Thoughts on Flash）” 的長篇公開信，信中抨擊了Flash Player的種種缺點，具體如下：
·安全性差，被賽門鐵克公司列為 2009 年最差安全記錄之一；
·穩定性不好，導致 Mac 電腦死機；
·遲遲未推出移動版，導致手機等移動設備訪問 Flash 視頻網站時消耗了大量額外的電力；
·Flash 主要的操作習慣均為鼠標定制，在多點觸摸操作方式中，大量 Flash 網站需要重寫
時至今日，Flash Player依然保留著這些缺點。而隨著HTML5的崛起，Flash的功能也早不再是獨步江湖，無論是視頻播放，還是多媒體交互，HTML5都能做得更好。無論在功能還是性能上，Flash對比HTML5都沒有優勢。
業界對這些情況是早有了解的。在iOS拒絕Flash登陸后，Android和WP也隨之宣布不再支持Flash Player。而在桌面平臺上，Flash Player也走到了盡頭，無論是Chrome、Firefox還是Edge，都對Flash發出了最后通牒。
無論從兼容、功能、效率、安全的角度出發，Flash都已經跟不上時代，它被淘汰自然也就理所當然了。
中國特供的Flash值得繼續使用嗎？
由于國情，中國的互聯網生態對Flash的依賴是比較重的。國內仍有不少老舊的網絡系統，需要借助Flash來實現辦公、登錄、上傳數據等功能。此情此景下，Adobe和重橙網絡合作，推出中國特供版的Flash，就有了其合理之處。
Adobe表示，這是為了支持中國大陸地區市場特有的發行渠道、用戶習慣和企業、開發者和游戲社區。然而用戶對此是否買賬？未必。
在Adobe的官方微博下，出現了大量負面評論，不少網友都并不歡迎Flash中國特供版，還有人將其斥為“流氓軟件”。出現這樣的情況其實是可以理解的，因為從2018年重橙代理Flash一來，中國地區特供的Flash就已經帶上了一些強硬的推廣風氣。
Adobe微博的評論區中，大家并不歡迎Flash中國特供版
例如，當你更新完Flash后，就會彈出一個推廣網頁，其中的內容可以說非常“屠龍寶刀點擊就送”了。又例如，Flash之前還干過捆綁2144游戲中心、強行運行FlashHelperService進程之類的事情，很多作風已經帶有流氓軟件的特征。在這樣的情形下，人們自然會對中國特供版Flash產生不信任。
Flash更新后彈出的游戲推廣頁面
另一方面，Flash本身作為落后的互聯網技術，用特供版來茍延殘喘，這是否逆潮流而行？如果讓Flash徹底退役，倒逼依賴Flash的各類網絡系統來革新，會不會是更合理的做法？這是很值得探討的問題。
總結
作為舊時代的產物，Flash的退役是合乎情理的。但國內的一些互聯網系統仍依賴Flash，中國特供版的Flash依舊有用武之地。
微軟Win10內置Flash，會推送補丁修復Flash漏洞
另外，目前Windows10仍內置Flash Player，而且會通過Windows Update推送相應更新，如果你想要避免Flash帶來的彈窗等問題，使用Win10內置的Flash或許是更好的選擇。當然，在Adobe停止Flash的技術支持后，或許Win10的Flash更新推送也會停止，但國內特供的Flash就會有安全補丁推送嗎？重橙網絡是否有修補Flash漏洞的能力？我們拭目以待吧。
們要先了解一下什么是瀏覽器兼容性，
指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。（JS、html、css的兼容性）
在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。
具體指的是以下兩方面的不兼容：
a) 不同的瀏覽器對CSS解釋不同
b) 不同的瀏覽器的默認值表現差別
說到瀏覽器的兼容性，那我們要了解一下有那些瀏覽器和瀏覽器的歷史了。
A. Netscape Navigator
Netscape Navigator 網景，開始時是收費的。為IE的崛起留下了后患。
B. IE瀏覽器
1995年 IE瀏覽器第一個版本首發
1997年IE4版本發布，再后來2001年8月IE6瀏覽器獨占鰲頭
2006年10月IE7發布
2009年3月IE8發布
2011年3月IE9發布
2011年4月IE10發布
C. 2004年11月Firefox1.0首發
D. 2008年 谷歌瀏覽器發布
E. 1995年4月 opera瀏覽器發布
做好瀏覽器的兼容性，也就是我們寫的代碼要符合一種標準，再讓瀏覽器都符合這種標準也就實現了瀏覽器的兼容了。
首先我們來看一下我們寫的代碼要符合那種標準，也就是W3C標準。
W3C—World Wide Web Consortium 萬維網聯盟，萬維網聯盟創建于1994年，是WEB技術領域最具有權威和影響力的國際中立性技術標準機構。Web標準是一系列標準的集合。網頁主要由三部分組成：結構（Structure）也就是HTML、表現（Presentation）也就是CSS、行為(Behavior)也就是JS。那怎樣讓我們的代碼做到符合WEB標準呢？
HTML標準
1. 每個文檔必須加上DOCTYPE聲明
2. 定義語言編碼
3. 圖片的alt="" 屬性必須每張圖片都加上，而且對齊屬性用CSS來定義
4. 標簽的鏈接屬性加上JAVASCRIPT事件時必須為#空鏈,不能為javascript：;或javascript：void(null);
5. 同一個頁面當中，同名的ID會產生沖突
6. 標簽屬性不可省略雙引號或單引號，盡量使用雙引號
7. 標簽之間不可交叉嵌套
8. 所有的標簽都使用小寫
9. 閉合。雙標簽必須閉合，單標簽（自關閉標簽）不閉合
10. 所有的樣式全部寫在外部文件
11. 頁面上的一些特殊字符必須用HTML代碼來標識.如“&”寫成“&“
o 任何小于號（<）,不是標簽的一部分，都必須被編碼為
o 任何大于號（>）,不是標簽的一部分，都必須被編碼為
o 任何與號（&）,不是實體的一部分的，都必須被編碼為
12. 欄目標題部分使用h標簽
13. 對于SEO優化的標簽有二個比較重要的Strong和Em的。它們的權重是很高的，Strong有重點，突出之意，em有強調 提醒之意
14. 使用表格時不要給表格指定高度，
15. 使用<label>標簽包裹radio或checkbox和他們的文字
16. 省略type屬性。使用style、link、script，不用指定type屬性，因為 text/css 和 text/javascript 分別是他們的默認值。
17. 省略Boolean屬性值。Boolean屬性不用添加取值，disabled,checked,selected等
18. 詳盡注釋但是不建議塊狀注釋
CSS標準
1. 不建議CSS中嵌套的層次太多，建議三次為佳
2. 建議把具有共性的CSS提成全局的這樣每個需要使用的標簽可以去繼承；減少CSS代碼會提高加載效率
3. 在書寫CSS時，建議使用全小寫字母
4. 在寫CSS屬性時，能寫復合屬性的寫復合屬性
書寫代碼原則
1. 規范 。保證您的代碼規范，趨html5，遠xhtml，保證結構表現行為相互分離
2. 簡潔。保證代碼的最簡化，避免多余的空格、空行，保持代碼的語義化，盡量使用具有語義的元素，避免使用樣式屬性和行為屬性。任何時候都要用盡量簡單、盡量少的元素解決問題。
3. 實用。遵循標準，但是不能以犧牲實用性為代價
4. 忠誠。選擇一套規范，然后始終遵循。不管代碼由多少人參與，都應該看起來像一個人寫的一樣。
以上也是我們書寫代碼時注意事項。
了解以上的知識點之后我們來看一下如何做到寫的代碼瀏覽器兼容吧及常見問題及解決方案
√ CSS Hack(修改)
√ 常見問題（bug）及解決方法
√ 經驗與技巧
一、 CSS Hack
1. 什么是CSS Hack
由于不同的瀏覽器，甚至同一瀏覽器的不同版本對CSS的解析認識不一樣，導致生成的頁面效果不一致，寫出針對不同瀏覽器CSS code就稱為CSS hack
2. CSS Hack的分類
IE條件注釋Hack
CSS選擇符Hack
CSS屬性Hack
!important
Css3新增屬性及選擇器hack
注：css hack的書寫順序：總結出的規律就是：先一般，再特殊 。
好，我們CSS Hack分別講解一下吧！
2.1 IE條件注釋Hack
為什么使用IE條件注釋法呢，因為IE的版本不斷的更新，還有一部分用戶在使用老版本的瀏覽器，瀏覽器的版本之間也存在著瀏覽器的兼容問題，所以要做好瀏覽器的兼容性。就像現在，如果我們寫代碼要把IE瀏覽器兼容好的話，我們要做兼容IE6、IE7、IE8、IE9、IE10、IE11;但是我們知道IE6、IE7幾乎沒有人使用了，所以我們做頁面不需要考慮IE6和IE7了。但是我們對于以前的知識點還是要掌握的。
在這里大家要裝一下IE Tester這個集成瀏覽器。這個軟件將所有的IE版本的瀏覽器集成到了一起，測試不同版本的瀏覽器兼容性比較方便。
語法：
a):針對CSS添加的條件注釋法，根據代碼具有注釋的版本識別的CSS樣式。
<!--[if IE]><!-- 如果是IE瀏覽器,調用css.css樣式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<![endif]-->
HTML代碼：
CSS代碼：
IE瀏覽器的顯示效果：
其它瀏覽器版本顯示的都一樣，這里就不一一截圖了！
非IE瀏覽器的顯示效（因為是專門對IE瀏覽器的，所以其它瀏覽器就不會有效果了）：
所以我們可針對不同的IE瀏覽器那一部分的CSS存在兼容的問題，可以單獨去寫相關的CSS代碼。如果還可以專門指定是那個版本，也可以再加上相關的修飾符，我們這里只演示一個(lt),其它的使用方式都一樣。來看一下效果。
HTML代碼：
CSS代碼：
顯示效果：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
