資訊專欄INFORMATION COLUMN
摘要：效果不帶連線效果帶連線的效果教程要實現這樣的效果其實很簡單，大概分為這么幾個步驟創建首先需要在需要展示粒子背景的父元素中創建一個標簽指定和在我們生成隨機點坐標的時候需要用和來做參照。調用函數開啟動畫如果不需要畫線，取消下面這行代碼即可。
效果 :)
不帶連線效果：
帶連線的效果：
要實現這樣的效果其實很簡單，大概分為這么幾個步驟：
創建canvas首先需要在需要展示粒子背景的父元素中創建一個canvas標簽, 指定width和height, 在我們生成隨機點坐標的時候需要用width和height來做參照。width和height等于父元素的寬和高。
// 假如父元素是body
const ele = document.body;
const canvas = document.createElement("canvas");
canvas.width = ele.clientWidth;
canvas.height = ele.clientHeight;
// 將canvas標簽插入
ele.appendChild(canvas);
隨機生成一定數量的點坐標信息
以width和height做參照隨機生成一定數量的點坐標信息，包含x, y, rateX(點在X軸的移動速率), rateY(點在Y軸移動的速率), rateX和rateY決定了點的運動軌跡。
const points = [];
// 隨機生成點的坐標，需指定radius的最大值
function getPoint(radius) {
const x = Math.ceil(Math.random() * this.width), // 粒子的x坐標
y = Math.ceil(Math.random() * this.height), // 粒子的y坐標
r = +(Math.random() * this.radius).toFixed(4), // 粒子的半徑
rateX = +(Math.random() * 2 - 1).toFixed(4), // 粒子在x方向運動的速率
rateY = +(Math.random() * 2 - 1).toFixed(4); // 粒子在y方向運動的速率
return { x, y, r, rateX, rateY };
}
// 隨機生成100個點的坐標信息
for (let i = 0; i < 100; i++) {
points.push(this.getPoint());
}
將生成的點數組畫到canvas上
function drawPoints() {
points.forEach((item, i) => {
ctx.beginPath();
ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false);
ctx.fillStyle = "#fff";
ctx.fill();
// 根據rateX和rateY移動點的坐標
if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) {
item.x += item.rateX * rate;
item.y += item.rateY * rate;
} else {
// 如果粒子運動超出了邊界，將這個粒子去除，同時重新生成一個新點。
points.splice(i, 1);
points.push(getPoint(radius));
}
});
}
畫線
遍歷點數組，兩兩比較點坐標，如果兩點之間距離小于某個值，在兩個點之間畫一條直線，lineWidth隨兩點之間距離改變，距離越大，線越細。
// 計算兩點之間的距離
function dis(x1, y1, x2, y2) {
var disX = Math.abs(x1 - x2),
disY = Math.abs(y1 - y2);
return Math.sqrt(disX * disX + disY * disY);
}
function drawLines() {
const len = points.length;
//對圓心坐標進行兩兩判斷
for(let i = 0; i < len; i++) {
for(let j = len - 1; j >= 0; j--) {
const x1 = points[i].x,
y1 = points[i].y,
x2 = points[j].x,
y2 = points[j].y,
disPoint = dis(x1, y1, x2, y2);
// 如果兩點之間距離小于150，畫線
if(disPoint <= 150) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "#fff";
//兩點之間距離越大，線越細，反之亦然
ctx.lineWidth = 1 - disPoint / distance;
ctx.stroke();
}
}
}
}
動畫
使用requestAnimationFrame循環調用draw方法（draw方法里包含畫點和畫線），同時在draw的時候根據rateX和rateY來改動點的位置。
// 調用draw函數開啟動畫
(function draw() {
ctx.clearRect(0, 0, width, height);
drawPoints();
// 如果不需要畫線，取消下面這行代碼即可。
drawLines();
window.requestAnimationFrame(draw);
}());
完整代碼請看: https://github.com/PengJiyuan...我的Github：https://github.com/PengJiyuan
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97190.html
摘要：模擬飛機航班線路動畫一款基于的飛機航班線路模擬動畫，它模擬了許多航班在不同目的地的起飛降落數量。跳動加載動畫可調節參數這是一款基于的跳動加載動畫，它的另一個特點是可以動態調節動畫參數。 showImg(https://segmentfault.com/img/bVblze6?w=900&h=383); HTML5 動畫在Canvas 上得到了充分的發揮，我們 VIP 視頻也分享過很多相...
摘要：在融合動畫的過程中，我并不想讓動畫占用網頁的版面，而是作為背景動畫。作為背景層進行動畫繪制，內容文字層懸浮在上面。簡化的代碼是這樣浮動在上的文字內容官方截圖到這里全背景動畫問題已經順利的解決了。 在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站 的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更...
摘要：在融合動畫的過程中，我并不想讓動畫占用網頁的版面，而是作為背景動畫。作為背景層進行動畫繪制，內容文字層懸浮在上面。簡化的代碼是這樣浮動在上的文字內容官方截圖到這里全背景動畫問題已經順利的解決了。 在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站 的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更...
摘要：在融合動畫的過程中，我并不想讓動畫占用網頁的版面，而是作為背景動畫。作為背景層進行動畫繪制，內容文字層懸浮在上面。簡化的代碼是這樣浮動在上的文字內容官方截圖到這里全背景動畫問題已經順利的解決了。 在日常的學習中我接觸到一些HTML5 Canvas動畫，在開發 tiomg.org 太美在線工具網站 的時候，想將這些震撼或小清新的動畫融合到工具網站中，這樣可以使原本單調的網頁看起來豐富和更...
閱讀 1362·2021-10-09 09:44
閱讀 1443·2021-09-28 09:36
閱讀 15970·2021-09-22 15:55
閱讀 1245·2021-09-22 15:45
閱讀 2203·2021-09-02 09:48
閱讀 2786·2019-08-29 17:19
閱讀 2299·2019-08-29 10:54
閱讀 913·2019-08-23 18:40
