- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- HTML中怎么實現(xiàn)圖片碎片化進行加載的效果
HTML中怎么實現(xiàn)圖片碎片化進行加載的效果
Admin 2022-06-21 群英技術(shù)資訊 966 次瀏覽
今天就跟大家聊聊有關(guān)“HTML中怎么實現(xiàn)圖片碎片化進行加載的效果”的內(nèi)容，可能很多人都不太了解，為了讓大家認識和更進一步的了解，小編給大家總結(jié)了以下內(nèi)容，希望這篇“HTML中怎么實現(xiàn)圖片碎片化進行加載的效果”文章能對大家有幫助。今天來實現(xiàn)一個圖片碎片化加載效果，效果如下：
我們分為 3 個步驟來實現(xiàn)：
- 定義 html 結(jié)構(gòu)
- 拆分圖片
- 編寫動畫函數(shù)
定義html結(jié)構(gòu)
這里只需要一個 canvas 元素就可以了。
<html>
<body>
<canvas
id="myCanvas"
width="900"
height="600"
style="background-color: black;"
></canvas>
</body>
</html>
拆分圖片
這個例子中，我們將圖片按照 10 行 10 列的網(wǎng)格，拆分成 100 個小碎片，這樣就可以對每一個小碎片獨立渲染了。
let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let boxWidth, boxHeight;
// 拆分成 10 行，10 列
let rows = 10,
columns = 20,
counter = 0;
image.onload = function () {
// 計算每一行，每一列的寬高
boxWidth = image.width / columns;
boxHeight = image.height / rows;
// 循環(huán)渲染
requestAnimationFrame(animate);
};
requestAnimationFrame ：告訴瀏覽器，你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。
編寫動畫函數(shù)
接下來我們編寫動畫函數(shù)，讓瀏覽器在每一次重繪前，隨機渲染某個小碎片。
這里的核心是 context.drawImage 方法。
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
function animate() {
// 隨機渲染某個模塊
let x = Math.floor(Math.random() * columns);
let y = Math.floor(Math.random() * rows);
// 核心
context.drawImage(
image,
x * boxWidth, // canvas 中橫坐標起始位置
y * boxHeight, // canvas 中縱坐標起始位置
boxWidth, // 畫圖的寬度（小碎片圖像的寬）
boxHeight, // 畫圖的高度（小碎片圖像的高）
x * boxWidth, // 從大圖的 x 坐標位置開始畫圖
y * boxHeight, // 從大圖的 y 坐標位置開始畫圖
boxWidth, // 從大圖的 x 位置開始，畫多寬（小碎片圖像的寬）
boxHeight // 從大圖的 y 位置開始，畫多高（小碎片圖像的高）
);
counter++;
// 如果模塊渲染了 90%，就讓整個圖片顯示出來。
if (counter > columns * rows * 0.9) {
context.drawImage(image, 0, 0);
} else {
requestAnimationFrame(animate);
}
}
完整代碼
<html>
<body>
<canvas
id="myCanvas"
width="900"
height="600"
style="background-color: black;"
></canvas>
<script>
let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let boxWidth, boxHeight;
let rows = 10,
columns = 20,
counter = 0;
image.onload = function () {
boxWidth = image.width / columns;
boxHeight = image.height / rows;
requestAnimationFrame(animate);
};
function animate() {
let x = Math.floor(Math.random() * columns);
let y = Math.floor(Math.random() * rows);
context.drawImage(
image,
x * boxWidth, // 橫坐標起始位置
y * boxHeight, // 縱坐標起始位置
boxWidth, // 圖像的寬
boxHeight, // 圖像的高
x * boxWidth, // 在畫布上放置圖像的 x 坐標位置
y * boxHeight, // 在畫布上放置圖像的 y 坐標位置
boxWidth, // 要使用的圖像的寬度
boxHeight // 要使用的圖像的高度
);
counter++;
if (counter > columns * rows * 0.9) {
context.drawImage(image, 0, 0);
} else {
requestAnimationFrame(animate);
}
}
</script>
</body>
</html>
總結(jié)
通過這個 Demo，我們使用了 canvasAPI 實現(xiàn)了圖片的碎片加載效果，是不是特別簡單！
現(xiàn)在大家對于HTML中怎么實現(xiàn)圖片碎片化進行加載的效果的內(nèi)容應該都有一定的認識了吧，希望這篇能對大家有所幫助。最后，想要了解更多，歡迎關(guān)注群英網(wǎng)絡，群英網(wǎng)絡將為大家推送更多相關(guān)的文章。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
HTML5如何實現(xiàn)點擊翻轉(zhuǎn)并變換圖片的效果
這篇文章主要介紹了HTML5實現(xiàn)移動端點擊翻牌功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
-
css中的@是什么意思？如何使用?
css中的@是什么意思？如何使用?對于css中@的作用和用法，一些朋友可能不是很了解，對此本文就給大家來詳細的介紹一下@的使用，下文有示例可以參考，需要的朋友可以了解看看。
-
CSS盒子模型的定義是什么，包括哪些元素
什么是盒子呢？拿下舉例，我們可以把每個紅框都比作一個盒子，他們可以是任意的HTML元素。盒子模型所謂盒子模型：就是把HTML頁面中的布局元素看作是一個矩形的盒子，也就...
-
CSS定時器應用中有什么控制定時器的方法
平時工作中很多場合都要用到定時器，比如延遲加載、定時查詢等等，但定時器的控制有時候會有些許麻煩，比如鼠標移入停止、移出再重新開始。這次介紹幾個借助 CSS 來更好的控制定時器的方法，一起了解一下吧，相信可以帶來不一樣的體驗。
-
用CSS+HTML實現(xiàn)的搜索圖標搜索框代碼是什么
這篇文章主要介紹了基于html css實現(xiàn)帶搜索圖標的搜索框功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊關(guān)注或聯(lián)系群英網(wǎng)絡
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務電話：010-58813000
服務郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
