今日来完成一个图片泛娱乐化载入实际效果 ,实际效果以下:

基于HTML代码实现图片碎片化加载功能 HTML 图片 碎片化 加载 HTML/Xhtml  第1张  

大家分成 3 个流程来完成:

  • 定义 HTML 结构
  • 分拆图片
  • 撰写动漫涵数

定义html结构

这儿只必须一个 canvas 原素就可以了 。

<html>
  <body>
    <canvas
      id="myCanvas"
      width="900"
      height="600"
      style="background-color: black;"
    ></canvas>
  </body>
</html>

分拆图片

这一事例中,大家将图片依照 10 行 10 列的网格图,拆分为 100 个小残片 ,那样就可以对每一个小残片单独3D渲染了。

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;
  // 循环系统3D渲染
  requestAnimationFrame(animate);
};

requestAnimationFrame :告知电脑浏览器 ,你期待实行一个动漫,而且规定电脑浏览器在下一次重绘以前启用特定的回调函数升级动漫。

撰写动漫涵数

接下去大家撰写动漫涵数,让电脑浏览器在每一次重绘前 ,任意3D渲染某一小残片 。

这儿的关键是 context.drawImage 方式 。

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function animate() {
  // 任意3D渲染某一控制模块
  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  ;
  // 假如控制模块3D渲染了 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>

小结

根据这一 Demo ,大家应用了 canvasAPI 完成了图片的残片载入实际效果,是否尤其简易!

到此这篇有关根据HTML编码完成图片泛娱乐化载入作用的文章内容就详细介绍到这了,大量有关html图片泛娱乐化载入內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!