Canvas之鼠標(biāo)滑動(dòng)特效

家好，我是皮皮。

我們會(huì)看到很多網(wǎng)頁的粒子特效；如上圖所示，這些都是借助HTML新特性，使用新增標(biāo)簽Canvas得到的效果；那么我們來了解下canvas。

什么是 Canvas

在 MDN 中是這樣定義 <canvas> 的：

<canvas> 是 HTML5 新增的元素，可用于通過使用 JavaScript 中的腳本來繪制圖形。例如，它可以用于繪制圖形、制作照片、創(chuàng)建動(dòng)畫，甚至可以進(jìn)行實(shí)時(shí)視頻處理或渲染。

這里需要?jiǎng)澲攸c(diǎn)的是，<canvas> 只是一個(gè)畫布，本身并不具有繪圖的能力，繪圖必須使用 JavaScript 等腳本語言。

<canvas> 標(biāo)簽允許腳本語言動(dòng)態(tài)渲染位圖像。<canvas> 標(biāo)簽創(chuàng)建出了一個(gè)可繪制區(qū)域，JavaScript 代碼可以通過一套完整的繪圖功能類似于其他通用二維的 API 訪問該區(qū)域，從而生成動(dòng)態(tài)的圖形。

我們可以認(rèn)為 <canvas> 標(biāo)簽只是一個(gè)矩形的畫布。JavaScript 就是畫筆，負(fù)責(zé)在畫布上畫畫。

Canvas 解決了什么問題?

在互聯(lián)網(wǎng)出現(xiàn)的早期，Web 只不過是靜態(tài)文本和鏈接的集合。1993 年，有人提出了 img 標(biāo)簽，它可以用來嵌入圖像。

由于互聯(lián)網(wǎng)的發(fā)展越來越迅猛，Web 應(yīng)用已經(jīng)從 Web 文檔發(fā)展到 Web 應(yīng)用程序。但是圖像一直是靜態(tài)的，人們越來越希望在其網(wǎng)站和應(yīng)用程序中使用動(dòng)態(tài)媒體（如音頻、視頻和交互式動(dòng)畫等），于是 Flash 就出現(xiàn)了。

但是隨著 Web 應(yīng)用的發(fā)展，出現(xiàn)了 HTML5，在 HTML5 中，瀏覽器中的媒體元素大受青睞。包括出現(xiàn)新的 Audio 和 Video 標(biāo)簽，可以直接將音頻和視頻資源放在 Web 上，而不需要其他第三方。

其次就是為了解決只能在 Web 頁面中顯示靜態(tài)圖片的問題，出現(xiàn)了 Canvas 標(biāo)簽。它是一個(gè)繪圖表面，包含一組豐富的 JavaScript API，這些 API 使你能夠動(dòng)態(tài)創(chuàng)建和操作圖像及動(dòng)畫。img 對靜態(tài)圖形內(nèi)容起到了哪些作用，Canvas 就可能對可編寫腳本的動(dòng)態(tài)內(nèi)容起到哪些作用。

案例-鼠標(biāo)滑動(dòng)效果

了解了canvas之后，我們使用新標(biāo)簽搭配原生JS，實(shí)現(xiàn)一個(gè)簡單的頁面特效 ------ 鼠標(biāo)滑動(dòng)效果，如下所示:

頁面搭建

<!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>

頁面非常簡單，只需要一個(gè)簡單的canvas標(biāo)簽即可；

樣式設(shè)置

* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
}

#myCanvas {
    background-color: #000; /* 黑色 */
}

邏輯交互

初始化設(shè)置

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
var starlist = [];
function init() {
    // 設(shè)置canvas區(qū)域的范圍為整個(gè)頁面
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
};
init();

監(jiān)聽

window.onresize = init; // 監(jiān)聽屏幕大小改變 重新為canvas大小賦值

移動(dòng)事件

// 當(dāng)鼠標(biāo)移動(dòng)時(shí) 將鼠標(biāo)坐標(biāo)傳入構(gòu)造函數(shù) 同時(shí)創(chuàng)建一個(gè)對象
myCanvas.addEventListener('mousemove', function (e) {
    // 將對象push到數(shù)組中，畫出來的彩色小點(diǎn)可以看作每一個(gè)對象中記錄著信息 然后存在數(shù)組中
    starlist.push(new Star(e.offsetX, e.offsetY));
});

隨機(jī)函數(shù)

// 隨機(jī)函數(shù)封裝,設(shè)置坐標(biāo)
function random(min, max) {
    // 設(shè)置生成隨機(jī)數(shù)公式
    return Math.floor((max - min) * Math.random() + min);
};

對象構(gòu)造

// 定義了一個(gè)構(gòu)造函數(shù)進(jìn)行對象構(gòu)造
function Star(x, y) {
    // 將坐標(biāo)存在每一個(gè)點(diǎn)的對象中
    this.x = x;
    this.y = y;
    // 設(shè)置隨機(jī)偏移量
    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根據(jù)數(shù)組中存在的每一個(gè)對象的小點(diǎn)信息開始畫
    draw: function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        // 圖像覆蓋  顯示方式 lighter 會(huì)將覆蓋部分的顏色重疊顯示出來
        ctx.globalCompositeOperation = 'lighter'
        ctx.globalAlpha = this.a;
        ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
        ctx.fill();
        this.updata();
    },
    updata() {
        // 根據(jù)偏移量更新每一個(gè)小點(diǎn)的位置
        this.x += this.vx;
        this.y += this.vy;
        // 透明度越來越小
        this.a *= 0.98;
    }
}

渲染

// 將小球渲染到頁面上
function render() {
    // 每一次根據(jù)改變后數(shù)組中的元素進(jìn)行畫圓圈  把原來的內(nèi)容區(qū)域清除掉
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)

    // 根據(jù)存在數(shù)組中的每一位對象中的信息畫圓
    starlist.forEach(function (ele, i) {
        ele.draw();
        // 如果數(shù)組中存在透明度小的對象 ，給他去掉 效果展示逐漸消失
        if (ele.a < 0.05) {
            starlist.splice(i, 1);
        }
    });
    requestAnimationFrame(render);
}
render();

總結(jié)

本文我們首先了解了粒子特效，它大多數(shù)是HTML的新特性，使用canvas標(biāo)簽創(chuàng)建出來的，或者說是繪制吧，canvas是畫布，但是還需要搭配js來構(gòu)造動(dòng)態(tài)效果，創(chuàng)建出好看的特效?？偠灾?，canvas的出現(xiàn)使得前端頁面變得更加豐富多彩，提高了視覺效果，對于用戶體驗(yàn)進(jìn)行了適當(dāng)?shù)脑鰪?qiáng)，感興趣的小伙伴可以去嘗試下，鼠標(biāo)滑動(dòng)效果特效。

小伙伴們，快快用實(shí)踐一下吧！如果在學(xué)習(xí)過程中，有遇到任何問題，歡迎加我好友，我拉你進(jìn)Python學(xué)習(xí)交流群共同探討學(xué)習(xí)。

源：太平洋電腦網(wǎng)

最近，關(guān)于Flash死亡的話題又再次引起了熱議。早前Flash Player的東家Adobe就已經(jīng)確認(rèn)，將會(huì)在2020年12月31日徹底停止支持Flash Player，F(xiàn)lash Player迎來生命終點(diǎn)（EOL）。Adobe在其官網(wǎng)上確認(rèn)，F(xiàn)lash Player將不再獲得任何包括安全更新在內(nèi)的技術(shù)支持，用戶應(yīng)該在EOL日期之前卸載Flash。

Flash將停止運(yùn)營，但中國特供版除外？

然而，Adobe同時(shí)在新浪微博上表示，Adobe將會(huì)繼續(xù)與重橙網(wǎng)絡(luò)合作并支持其在中國大陸地區(qū)對Flash Player的獨(dú)家發(fā)行與維護(hù)，該合作僅限中國大陸地區(qū)。換言之，F(xiàn)lash Player特別為中國制作了一個(gè)“特供版”，這到底是個(gè)怎么樣的存在？值不值得繼續(xù)使用？今天就來談?wù)劙伞?

Flash Player為何要迎來終結(jié)？

作為曾經(jīng)網(wǎng)絡(luò)上的大紅人，F(xiàn)lash Player退役終究是一件令人唏噓的事情。在早年，F(xiàn)lashFlash誕生于1996年，為仍處于雛形的互聯(lián)網(wǎng)帶來了更豐富的交互、更多樣的色彩、更動(dòng)感的視覺，是否使用Flash，甚至一度成為網(wǎng)頁是否先進(jìn)的標(biāo)準(zhǔn)——看看多少網(wǎng)頁開發(fā)的書籍都是Flash教程，就能得以一窺Flash當(dāng)年的江湖地位。

服務(wù)13億用戶的口號，還是名副其實(shí)的

然而，時(shí)代在變遷，F(xiàn)lash Player已經(jīng)難以在移動(dòng)互聯(lián)網(wǎng)時(shí)代繼續(xù)高歌猛進(jìn)。當(dāng)你蘋果iOS首度吹響了拋棄Flash Player的號角，喬布斯當(dāng)年為此甚至發(fā)布了一封“Flash 之我見（Thoughts on Flash）” 的長篇公開信，信中抨擊了Flash Player的種種缺點(diǎn)，具體如下：

·安全性差，被賽門鐵克公司列為 2009 年最差安全記錄之一；

·穩(wěn)定性不好，導(dǎo)致 Mac 電腦死機(jī)；

·遲遲未推出移動(dòng)版，導(dǎo)致手機(jī)等移動(dòng)設(shè)備訪問 Flash 視頻網(wǎng)站時(shí)消耗了大量額外的電力；

·Flash 主要的操作習(xí)慣均為鼠標(biāo)定制，在多點(diǎn)觸摸操作方式中，大量 Flash 網(wǎng)站需要重寫

時(shí)至今日，F(xiàn)lash Player依然保留著這些缺點(diǎn)。而隨著HTML5的崛起，F(xiàn)lash的功能也早不再是獨(dú)步江湖，無論是視頻播放，還是多媒體交互，HTML5都能做得更好。無論在功能還是性能上，F(xiàn)lash對比HTML5都沒有優(yōu)勢。

業(yè)界對這些情況是早有了解的。在iOS拒絕Flash登陸后，Android和WP也隨之宣布不再支持Flash Player。而在桌面平臺(tái)上，F(xiàn)lash Player也走到了盡頭，無論是Chrome、Firefox還是Edge，都對Flash發(fā)出了最后通牒。

無論從兼容、功能、效率、安全的角度出發(fā)，F(xiàn)lash都已經(jīng)跟不上時(shí)代，它被淘汰自然也就理所當(dāng)然了。

中國特供的Flash值得繼續(xù)使用嗎？

由于國情，中國的互聯(lián)網(wǎng)生態(tài)對Flash的依賴是比較重的。國內(nèi)仍有不少老舊的網(wǎng)絡(luò)系統(tǒng)，需要借助Flash來實(shí)現(xiàn)辦公、登錄、上傳數(shù)據(jù)等功能。此情此景下，Adobe和重橙網(wǎng)絡(luò)合作，推出中國特供版的Flash，就有了其合理之處。

Adobe表示，這是為了支持中國大陸地區(qū)市場特有的發(fā)行渠道、用戶習(xí)慣和企業(yè)、開發(fā)者和游戲社區(qū)。然而用戶對此是否買賬？未必。

在Adobe的官方微博下，出現(xiàn)了大量負(fù)面評論，不少網(wǎng)友都并不歡迎Flash中國特供版，還有人將其斥為“流氓軟件”。出現(xiàn)這樣的情況其實(shí)是可以理解的，因?yàn)閺?018年重橙代理Flash一來，中國地區(qū)特供的Flash就已經(jīng)帶上了一些強(qiáng)硬的推廣風(fēng)氣。

Adobe微博的評論區(qū)中，大家并不歡迎Flash中國特供版

例如，當(dāng)你更新完Flash后，就會(huì)彈出一個(gè)推廣網(wǎng)頁，其中的內(nèi)容可以說非?！巴例垖毜饵c(diǎn)擊就送”了。又例如，F(xiàn)lash之前還干過捆綁2144游戲中心、強(qiáng)行運(yùn)行FlashHelperService進(jìn)程之類的事情，很多作風(fēng)已經(jīng)帶有流氓軟件的特征。在這樣的情形下，人們自然會(huì)對中國特供版Flash產(chǎn)生不信任。

Flash更新后彈出的游戲推廣頁面

另一方面，F(xiàn)lash本身作為落后的互聯(lián)網(wǎng)技術(shù)，用特供版來茍延殘喘，這是否逆潮流而行？如果讓Flash徹底退役，倒逼依賴Flash的各類網(wǎng)絡(luò)系統(tǒng)來革新，會(huì)不會(huì)是更合理的做法？這是很值得探討的問題。

總結(jié)

作為舊時(shí)代的產(chǎn)物，F(xiàn)lash的退役是合乎情理的。但國內(nèi)的一些互聯(lián)網(wǎng)系統(tǒng)仍依賴Flash，中國特供版的Flash依舊有用武之地。

微軟Win10內(nèi)置Flash，會(huì)推送補(bǔ)丁修復(fù)Flash漏洞

另外，目前Windows10仍內(nèi)置Flash Player，而且會(huì)通過Windows Update推送相應(yīng)更新，如果你想要避免Flash帶來的彈窗等問題，使用Win10內(nèi)置的Flash或許是更好的選擇。當(dāng)然，在Adobe停止Flash的技術(shù)支持后，或許Win10的Flash更新推送也會(huì)停止，但國內(nèi)特供的Flash就會(huì)有安全補(bǔ)丁推送嗎？重橙網(wǎng)絡(luò)是否有修補(bǔ)Flash漏洞的能力？我們拭目以待吧。

們要先了解一下什么是瀏覽器兼容性，

指因?yàn)椴煌臑g覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。（JS、html、css的兼容性）
在網(wǎng)站的設(shè)計(jì)和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。

具體指的是以下兩方面的不兼容：

a) 不同的瀏覽器對CSS解釋不同

b) 不同的瀏覽器的默認(rèn)值表現(xiàn)差別

說到瀏覽器的兼容性，那我們要了解一下有那些瀏覽器和瀏覽器的歷史了。

A. Netscape Navigator

Netscape Navigator 網(wǎng)景，開始時(shí)是收費(fèi)的。為IE的崛起留下了后患。

B. IE瀏覽器

1995年 IE瀏覽器第一個(gè)版本首發(fā)
1997年IE4版本發(fā)布，再后來2001年8月IE6瀏覽器獨(dú)占鰲頭
2006年10月IE7發(fā)布
2009年3月IE8發(fā)布
2011年3月IE9發(fā)布
2011年4月IE10發(fā)布

C. 2004年11月Firefox1.0首發(fā)

D. 2008年谷歌瀏覽器發(fā)布

E. 1995年4月 opera瀏覽器發(fā)布

做好瀏覽器的兼容性，也就是我們寫的代碼要符合一種標(biāo)準(zhǔn)，再讓瀏覽器都符合這種標(biāo)準(zhǔn)也就實(shí)現(xiàn)了瀏覽器的兼容了。

首先我們來看一下我們寫的代碼要符合那種標(biāo)準(zhǔn)，也就是W3C標(biāo)準(zhǔn)。

W3C—World Wide Web Consortium 萬維網(wǎng)聯(lián)盟，萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是WEB技術(shù)領(lǐng)域最具有權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）也就是HTML、表現(xiàn)（Presentation）也就是CSS、行為(Behavior)也就是JS。那怎樣讓我們的代碼做到符合WEB標(biāo)準(zhǔn)呢？

HTML標(biāo)準(zhǔn)

1. 每個(gè)文檔必須加上DOCTYPE聲明

2. 定義語言編碼

3. 圖片的alt="" 屬性必須每張圖片都加上，而且對齊屬性用CSS來定義

4. 標(biāo)簽的鏈接屬性加上JAVASCRIPT事件時(shí)必須為#空鏈,不能為javascript：;或javascript：void(null);

5. 同一個(gè)頁面當(dāng)中，同名的ID會(huì)產(chǎn)生沖突

6. 標(biāo)簽屬性不可省略雙引號或單引號，盡量使用雙引號

7. 標(biāo)簽之間不可交叉嵌套

8. 所有的標(biāo)簽都使用小寫

9. 閉合。雙標(biāo)簽必須閉合，單標(biāo)簽（自關(guān)閉標(biāo)簽）不閉合

10. 所有的樣式全部寫在外部文件

11. 頁面上的一些特殊字符必須用HTML代碼來標(biāo)識(shí).如“&”寫成“&“

o 任何小于號（<）,不是標(biāo)簽的一部分，都必須被編碼為

o 任何大于號（>）,不是標(biāo)簽的一部分，都必須被編碼為

o 任何與號（&）,不是實(shí)體的一部分的，都必須被編碼為

12. 欄目標(biāo)題部分使用h標(biāo)簽

13. 對于SEO優(yōu)化的標(biāo)簽有二個(gè)比較重要的Strong和Em的。它們的權(quán)重是很高的，Strong有重點(diǎn)，突出之意，em有強(qiáng)調(diào) 提醒之意

14. 使用表格時(shí)不要給表格指定高度，

15. 使用<label>標(biāo)簽包裹radio或checkbox和他們的文字

16. 省略type屬性。使用style、link、script，不用指定type屬性，因?yàn)?text/css 和 text/javascript 分別是他們的默認(rèn)值。

17. 省略Boolean屬性值。Boolean屬性不用添加取值，disabled,checked,selected等

18. 詳盡注釋但是不建議塊狀注釋

CSS標(biāo)準(zhǔn)

1. 不建議CSS中嵌套的層次太多，建議三次為佳

2. 建議把具有共性的CSS提成全局的這樣每個(gè)需要使用的標(biāo)簽可以去繼承；減少CSS代碼會(huì)提高加載效率

3. 在書寫CSS時(shí)，建議使用全小寫字母

4. 在寫CSS屬性時(shí)，能寫復(fù)合屬性的寫復(fù)合屬性

書寫代碼原則

1. 規(guī)范。保證您的代碼規(guī)范，趨html5，遠(yuǎn)xhtml，保證結(jié)構(gòu)表現(xiàn)行為相互分離

2. 簡潔。保證代碼的最簡化，避免多余的空格、空行，保持代碼的語義化，盡量使用具有語義的元素，避免使用樣式屬性和行為屬性。任何時(shí)候都要用盡量簡單、盡量少的元素解決問題。

3. 實(shí)用。遵循標(biāo)準(zhǔn)，但是不能以犧牲實(shí)用性為代價(jià)

4. 忠誠。選擇一套規(guī)范，然后始終遵循。不管代碼由多少人參與，都應(yīng)該看起來像一個(gè)人寫的一樣。

以上也是我們書寫代碼時(shí)注意事項(xiàng)。

了解以上的知識(shí)點(diǎn)之后我們來看一下如何做到寫的代碼瀏覽器兼容吧及常見問題及解決方案

√ CSS Hack(修改)

√ 常見問題（bug）及解決方法

√ 經(jīng)驗(yàn)與技巧

一、 CSS Hack

1. 什么是CSS Hack

由于不同的瀏覽器，甚至同一瀏覽器的不同版本對CSS的解析認(rèn)識(shí)不一樣，導(dǎo)致生成的頁面效果不一致，寫出針對不同瀏覽器CSS code就稱為CSS hack

2. CSS Hack的分類

IE條件注釋Hack
CSS選擇符Hack
CSS屬性Hack
!important
Css3新增屬性及選擇器hack

注：css hack的書寫順序：總結(jié)出的規(guī)律就是：先一般，再特殊。

好，我們CSS Hack分別講解一下吧！

2.1 IE條件注釋Hack

為什么使用IE條件注釋法呢，因?yàn)镮E的版本不斷的更新，還有一部分用戶在使用老版本的瀏覽器，瀏覽器的版本之間也存在著瀏覽器的兼容問題，所以要做好瀏覽器的兼容性。就像現(xiàn)在，如果我們寫代碼要把IE瀏覽器兼容好的話，我們要做兼容IE6、IE7、IE8、IE9、IE10、IE11;但是我們知道IE6、IE7幾乎沒有人使用了，所以我們做頁面不需要考慮IE6和IE7了。但是我們對于以前的知識(shí)點(diǎn)還是要掌握的。

在這里大家要裝一下IE Tester這個(gè)集成瀏覽器。這個(gè)軟件將所有的IE版本的瀏覽器集成到了一起，測試不同版本的瀏覽器兼容性比較方便。

語法：

a):針對CSS添加的條件注釋法，根據(jù)代碼具有注釋的版本識(shí)別的CSS樣式。

<![endif]-->

HTML代碼：

CSS代碼：

IE瀏覽器的顯示效果：

其它瀏覽器版本顯示的都一樣，這里就不一一截圖了！

非IE瀏覽器的顯示效（因?yàn)槭菍ｉT對IE瀏覽器的，所以其它瀏覽器就不會(huì)有效果了）：

所以我們可針對不同的IE瀏覽器那一部分的CSS存在兼容的問題，可以單獨(dú)去寫相關(guān)的CSS代碼。如果還可以專門指定是那個(gè)版本，也可以再加上相關(guān)的修飾符，我們這里只演示一個(gè)(lt),其它的使用方式都一樣。來看一下效果。

HTML代碼：

CSS代碼：

顯示效果：

在線咨詢

上一篇：還不知道什么是CSS？超詳細(xì)Web前端CSS布局講解
下一篇：CKEDITOR粘貼上傳圖片

您的項(xiàng)目需求

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

整合營銷服務(wù)商