• 慈善基金进社区 点对点帮扶居民 2019-04-10
  • 三面悬崖的3197哨所 战士背饮用水要走"天梯" 2019-04-10
  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-04-09
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2019-04-07
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-04-03
  • 故都之秋,惊艳了整个华东文章中国国家地理网 2019-04-03
  • 中国虚拟现实创新创业大赛南昌赛区颁奖仪式举行 2019-03-31
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-03-31
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-03-24
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-03-22
  • 上海电影节第三日:电影市场热议产业新形势 2019-03-22
  • 特朗普雇佣资深律师应对涉俄调查 2019-03-18
  • 两部门:支持建设一批乡土经济活跃的农业产业强镇 2019-03-17
  • 法国总统马克龙首次访华 法国居民期待成果 2019-03-16
  • 黑龙江p62历史开奖结果

    黑龙江省p62开奖:js实现图片水波倒影效果代码

    稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2018-07-03   阅读次数: 3   查看权限: 游客查看

    js实现图片水波倒影效果代码

     黑龙江p62历史开奖结果 www.tgpe.net 
    function waterWave(img, options) {
        var settings = Object.assign({
            'speed': 1,
            'scale': 1,
            'waves': 10,
            'image': true
        }, options)
        var waves = settings.waves
        var speed = settings.speed / 4
        var scale = settings.scale / 2
        var ca = document.createElement('canvas')
        var c = ca.getContext('2d')
        var img_loaded = false
        img.parentNode.insertBefore(ca, img)
        var w, h,  dh
        var offset = 0
        var frame = 0
        var max_frames = 0
        var frames = []
        img.onload = function () {
            this.style.display = 'none'
            c.save()
            w = this.width
            h = this.height * 2
            c.canvas.width = w
            c.canvas.height = h
            c.drawImage(this, 0, 0)
            c.scale(1, -1)
            c.drawImage(this, 0, -this.height * 2)
            img_loaded = true
            c.restore()
            dh = h / 2
            var id = c.getImageData(0, h / 2, w, h).data
            var end = false
            c.save()
            while (!end) {
                var odd = c.getImageData(0, h / 2, w, h)
                var od = odd.data
                var pixel = 0
                for (var y = 0; y < dh; y++) {
                    for (var x = 0; x < w; x++) {
                        var displacement = (scale * 10 * (Math.sin((dh / (y / waves)) + (-offset)))) | 0
                        var j = ((displacement + y) * w + x + displacement) * 4
                        if (j < 0) {
                            pixel += 4
                            continue
                        }
                        var m = j % (w * 4)
                        var n = scale * 10 * (y / waves)
                        if (m < n || m > (w * 4) - n) {
                            var sign = y < w / 2 ? 1 : -1
                            od[pixel] = od[pixel + 4 * sign]
                            od[++pixel] = od[pixel + 4 * sign]
                            od[++pixel] = od[pixel + 4 * sign]
                            od[++pixel] = od[pixel + 4 * sign]
                            ++pixel
                            continue
                        }
                        if (id[j + 3] !== 0) {
                            od[pixel] = id[j]
                            od[++pixel] = id[++j]
                            od[++pixel] = id[++j]
                            od[++pixel] = id[++j]
                            ++pixel
                        } else {
                            od[pixel] = od[pixel - w * 4]
                            od[++pixel] = od[pixel - w * 4]
                            od[++pixel] = od[pixel - w * 4]
                            od[++pixel] = od[pixel - w * 4]
                            ++pixel
                        }
                    }
                }
                if (offset > speed * (6 / speed)) {
                    offset = 0
                    max_frames = frame - 1
                    frame = 0
                    end = true
                } else {
                    offset += speed
                    frame++
                }
                frames.push(odd)
            }
            c.restore()
            if (!settings.image) {
                c.height = c.height / 2
            }
        }
        setInterval(function () {
            if (img_loaded) {
                if (!settings.image) {
                    c.putImageData(frames[frame], 0, 0)
                } else {
                    c.putImageData(frames[frame], 0, h / 2)
                }
                if (frame < max_frames) {
                    frame++
                } else {
                    frame = 0
                }
            }
        }, 33)
    }

     

    关键词: canvas   编辑时间: 2018-07-03 15:34:18

    • 感到高兴

      0

      高兴
    • 感到支持

      0

      支持
    • 感到搞笑

      0

      搞笑
    • 感到不解

      0

      不解
    • 感到谎言

      0

      谎言
    • 感到枪稿

      0

      枪稿
    • 感到震惊

      0

      震惊
    • 感到无奈

      0

      无奈
    • 感到无聊

      0

      无聊
    • 感到反对

      0

      反对
    • 感到愤怒

      0

      愤怒
    0%(0)
    0%(0)
    上一篇:利用CSS3变量实现令人震惊的悬浮效果
    下一篇:没有下一条记录
    共有0 条评论 发言请遵守【相关规定

    网友评论

    会员头像
    发 表同步腾讯微博  匿名评论  验证码:  点击更新
    • 暂无评论
    关闭??? align=文章图片 article Pictrue
    • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
    • 代码覆盖率工具 Istanbul 入门教程
    • 全栈工程师的武器——MEAN
    • 9款超炫的 CSS3 复选框(Checkbox)
    • 微信开发在线翻译功能
    • CSS3那些不为人知的高级属性
    • 给easyui的datebox添加清空事件
    • flash写字效果
    • kendoUI系列教程之DropDownList下拉菜单
    • kendoUI系列教程之datetimepicker日期时间选择
    • kendoUI系列教程之datepicker日期选择
    • kendoUI系列教程之combobox下拉列表框
    • kendoUI系列教程之colorpicker
    • kendoUI系列教程之calendar日历表
    • kendoUI系列教程之autocomplete自动补齐
    • kendo ui简介
  • 慈善基金进社区 点对点帮扶居民 2019-04-10
  • 三面悬崖的3197哨所 战士背饮用水要走"天梯" 2019-04-10
  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-04-09
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2019-04-07
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-04-03
  • 故都之秋,惊艳了整个华东文章中国国家地理网 2019-04-03
  • 中国虚拟现实创新创业大赛南昌赛区颁奖仪式举行 2019-03-31
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-03-31
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-03-24
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-03-22
  • 上海电影节第三日:电影市场热议产业新形势 2019-03-22
  • 特朗普雇佣资深律师应对涉俄调查 2019-03-18
  • 两部门:支持建设一批乡土经济活跃的农业产业强镇 2019-03-17
  • 法国总统马克龙首次访华 法国居民期待成果 2019-03-16
  • 北京赛车pk10助赢软件 舟山体彩飞鱼玩法技巧 体彩超级大乐透 河北时时彩软件手机版 澳洲幸运10官方开 好运快3 购买彩票 福彩3d和值走势图最近500 新时时彩二星组选技巧 浙江体彩11选5五码分布图 足彩4场进球开奖 河南福彩幸运武林玩法 七乐彩中奖规则 济南北京赛车盘出租 舟山飞鱼彩票控 pk10100本金滚雪球30天