本文关键详细介绍了根据HTML编码完成照片泛娱乐化载入作用,文中根据案例编码给大伙儿详细介绍的十分详尽，对大伙儿的学习培训或工作中具备一定的参照效仿使用价值，必须的盆友能够参照下
今日来完成一个照片泛娱乐化载入实际效果，实际效果以下：
大家分成 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 部位刚开始，画多宽（小残片图象的宽）
