中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › 基于HTML代码实现图片碎片化加载功能

[前端] 基于HTML代码实现图片碎片化加载功能

2163 0
王子 2022-10-19 15:52:25 | 显示全部楼层 |阅读模式
今天来实现一个图片碎片化加载效果，效果如下：


我们分为 3 个步骤来实现：
    定义 html 结构拆分图片编写动画函数
定义html结构
这里只需要一个 canvas 元素就可以了。
  1. <html>
  2.   <body>
  3.     <canvas
  4.       id="myCanvas"
  5.       width="900"
  6.       height="600"
  7.       style="background-color: black;"
  8.     ></canvas>
  9.   </body>
  10. </html>
复制代码
拆分图片
这个例子中，我们将图片按照 10 行 10 列的网格，拆分成 100 个小碎片，这样就可以对每一个小碎片独立渲染了。
  1. let image = new Image();
  2. image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
  3. let boxWidth, boxHeight;
  4. // 拆分成 10 行，10 列
  5. let rows = 10,
  6.   columns = 20,
  7.   counter = 0;
  9. image.onload = function () {
  10.   // 计算每一行，每一列的宽高
  11.   boxWidth = image.width / columns;
  12.   boxHeight = image.height / rows;
  13.   // 循环渲染
  14.   requestAnimationFrame(animate);
  15. };
复制代码
requestAnimationFrame ：告诉浏览器，你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
编写动画函数
接下来我们编写动画函数，让浏览器在每一次重绘前，随机渲染某个小碎片。
这里的核心是 context.drawImage 方法。
  1. let canvas = document.getElementById("myCanvas");
  2. let context = canvas.getContext("2d");
  4. function animate() {
  5.   // 随机渲染某个模块
  6.   let x = Math.floor(Math.random() * columns);
  7.   let y = Math.floor(Math.random() * rows);
  8.   // 核心
  9.   context.drawImage(
  10.     image,
  11.     x * boxWidth,  // canvas 中横坐标起始位置
  12.     y * boxHeight, // canvas 中纵坐标起始位置
  13.     boxWidth,      // 画图的宽度（小碎片图像的宽）
  14.     boxHeight,     // 画图的高度（小碎片图像的高）
  15.     x * boxWidth,  // 从大图的 x 坐标位置开始画图
  16.     y * boxHeight, // 从大图的 y 坐标位置开始画图
  17.     boxWidth,      // 从大图的 x 位置开始，画多宽（小碎片图像的宽）
  18.     boxHeight      // 从大图的 y 位置开始，画多高（小碎片图像的高）
  19.   );
  20.   counter++;
  21.   // 如果模块渲染了 90%，就让整个图片显示出来。
  22.   if (counter > columns * rows * 0.9) {
  23.     context.drawImage(image, 0, 0);
  24.   } else {
  25.     requestAnimationFrame(animate);
  26.   }
  27. }
复制代码
完整代码
  1. <html>
  2.   <body>
  3.     <canvas
  4.       id="myCanvas"
  5.       width="900"
  6.       height="600"
  7.       style="background-color: black;"
  8.     ></canvas>
  9.     <script>
  10.       let image = new Image();
  11.       image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
  12.       let canvas = document.getElementById("myCanvas");
  13.       let context = canvas.getContext("2d");
  14.       let boxWidth, boxHeight;
  15.       let rows = 10,
  16.         columns = 20,
  17.         counter = 0;
  19.       image.onload = function () {
  20.         boxWidth = image.width / columns;
  21.         boxHeight = image.height / rows;
  22.         requestAnimationFrame(animate);
  23.       };
  25.       function animate() {
  26.         let x = Math.floor(Math.random() * columns);
  27.         let y = Math.floor(Math.random() * rows);
  28.         context.drawImage(
  29.           image,
  30.           x * boxWidth, // 横坐标起始位置
  31.           y * boxHeight, // 纵坐标起始位置
  32.           boxWidth, // 图像的宽
  33.           boxHeight, // 图像的高
  34.           x * boxWidth, // 在画布上放置图像的 x 坐标位置
  35.           y * boxHeight, // 在画布上放置图像的 y 坐标位置
  36.           boxWidth, // 要使用的图像的宽度
  37.           boxHeight // 要使用的图像的高度
  38.         );
  39.         counter++;
  40.         if (counter > columns * rows * 0.9) {
  41.           context.drawImage(image, 0, 0);
  42.         } else {
  43.           requestAnimationFrame(animate);
  44.         }
  45.       }
  46.     </script>
  47.   </body>
  48. </html>
复制代码
总结
通过这个 Demo，我们使用了 canvasAPI 实现了图片的碎片加载效果，是不是特别简单！
到此这篇关于基于HTML代码实现图片碎片化加载功能的文章就介绍到这了,更多相关html图片碎片化加载内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天