今天来实现一个图片碎片化加载效果,效果如下:
我们分为 3 个步骤来实现:
定义 html 结构
拆分图片
编写动画函数
定义 html 结构
这里只需要一个 canvas 元素就可以了。
id="myCanvas"
width="900"
height="600"
style="background-color: black;"
>
拆分图片
这个例子中,我们将图片按照 10 行 10 列的网格,拆分成 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 = i