简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  • 全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
    您现在的位置:首页 >> JS >> 内容

    基于HTML代码实现图片碎片化加载功能

    内容摘要:html bodycanvas id='myCanvas' width='900' height='600' style='background-color: black;'/canvasscript let image = new Image(); image.src = 'https://cdn.yinhengli.com/canvas-example.......

      <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>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/6/23 发布时间:15:44:35 点击:1054 
  • 上一篇:Js生成随机数/随机字符串的方法
  • 下一篇:JS实现移动端可折叠导航菜单
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.35 Build 20.8.26(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020