Canvas之鼠標滑動特效

家好，我是皮皮。

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

什么是 Canvas

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

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

這里需要劃重點的是，<canvas> 只是一個畫布，本身并不具有繪圖的能力，繪圖必須使用 JavaScript 等腳本語言。

<canvas> 標簽允許腳本語言動態渲染位圖像。<canvas> 標簽創建出了一個可繪制區域，JavaScript 代碼可以通過一套完整的繪圖功能類似于其他通用二維的 API 訪問該區域，從而生成動態的圖形。

我們可以認為 <canvas> 標簽只是一個矩形的畫布。JavaScript 就是畫筆，負責在畫布上畫畫。

Canvas 解決了什么問題?

在互聯網出現的早期，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學習交流群共同探討學習。

家好，今天給大家介紹一款，css實現的鼠標滑動切換圖片html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

拖動鼠標，可以動態的切換兩張圖片，非常炫酷的特效（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：20222，需要的朋友，訪問下面鏈接后，搜索20222，即可獲取。

「鏈接」

家好，今天給大家介紹一款，網頁響應鼠標滾動特效代碼html前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

每滾動向下一次鼠標，文字和圖片都會發生變化，類似一些數碼產品新品發布網頁的效果，看起來非常酷炫（圖2）

圖2

向上滾動鼠標，圖片和文字就會還原（圖3）

圖3

源碼完整，需要的朋友可以下載學習（圖4）

圖4

本源碼編碼：10180，需要的朋友，點擊下面的鏈接后，搜索10180，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：HTTP狀態碼、響應頭、請求頭
下一篇：JavaScript 總結

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商