加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Vue波纹按钮组件制作

发布时间:2020-12-17 02:18:45 所属栏目:百科 来源:网络整理
导读:先说一下用法: 原理: 这里用的是canvas + requestAnimationFrame(兼容性可以网上找一下解决方法) 绘制的波纹,有些用的是css transform + setTimeout做的,我感觉不太好。 模板(template): 点击代码如下(我已经加入详细的注释) 这里主要初始化canva

先说一下用法:

原理:

这里用的是canvas + requestAnimationFrame(兼容性可以网上找一下解决方法) 绘制的波纹,有些用的是css transform + setTimeout做的,我感觉不太好。

模板(template):

点击代码如下(我已经加入详细的注释)

这里主要初始化canvas和获取用户点击的位置坐标,并开始绘制。

循环绘制

0) { this.timer = window.requestAnimationFrame(this.draw); } else { // 清除画布 this.context.clearRect(0,this.el.height); this.el.style.opacity = 0; } }

总结:

上面代码我没有复制完整,大家想看源码可以下载看一下

这是4月最后一天上班了,5.1要好好休息一下。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读