开始学习PWA
答： 诞生于2015年左右的 可以将 web app 包装成 app 的一种方案（理论上不是一种新技术），PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。 以MDN zh 来说： 就会在桌面上添加一个和原生应用一模一样的web app。 渐进式 适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。...
全面横评 6 大前端视频播放器
前言 最近，我在负责公司的音视频开发，使用的技术栈是 Vue3，技术方案采用的是基于第三方库二次封装播放器组件，来实现公司的业务定制需求。 市面上有很多第三方视频库，在最开始进行技术选型的时候，我也花了很多时间。 现在初步把我们公司的音视频组件开发完成了，我对视频第三方库的技术选型进行一个总结分享，希望能帮助到正在进行音视频开发的你。 这次技术选型一共会对比 6 个第三方库： xgplayer 、 video.js 、 ckplayer...
canvas实现画板及定制画笔
IP属地: 江西 2018.12.13 15:24:56字数 224阅读 2,775 本期的小需求: 在页面中实现一个能进行绘画的画板 能实现画笔颜色、粗细、撤回等功能 开发环境 Vue + elementUI 采坑记录 画笔与鼠标错位 （恶心很久） 画笔切换颜色 粗细，原来绘画的线条也改变了 图片跨域等等..... 动手 1.生成或选中canvas对象 2.生成绘画画布环境 ps: canvas 画板绘制api 3.ca...
H5绘图和动画H5
1 使用canvas 标签创建一块画布，属性有：id（标识画布，以便js对其引用），width（宽度），height（高度）。默认情况下画布大小为宽300px，高150px。 注意，与不同，需要结束标签，如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来 在canvas中，坐标原点（0,0）位于canvas画布的左上角，x轴水平向右延伸，y轴垂直向下延伸，所有元素的位置都相对于原点进行定位。 浏览器兼容： 老版本...
使用 Web Audio API 实现实时音频可视化
1\. 引言 1.1 Web Audio API 简介 Web Audio API 是一项强大的浏览器技术，它使我们能够以程序化的方式处理和分析音频数据。通过这个 API，我们可以在浏览器中创建各种音频应用，从简单的音频播放器到复杂的音频处理和可视化工具。Web Audio API 提供了一组强大的接口，使得在 Web 中处理音频变得更加容易。 这个 API 的核心是 对象，它代表了音频处理的上下文环境。在这个环境中，我们可以创建各种音...
关于window.open 被浏览器拦截解决方案
前言 在项目开发中，点击支付按钮后需要发送支付请求，并在请求完成后的回调中，经过一系列判断，符合某种条件下弹出一个新窗口页面。自然想到使用 ，但发现该操作会被浏览器拦截。 分析原因 当浏览器检测到非用户操作产生的新弹出窗口时，会对其进行阻止，因为浏览器认为这可能是广告，不是用户期望的页面。 注意： 如果 是在用户触发事件（如点击事件）或页面加载时调用，则不会被拦截；而一旦将弹出代码放入 Ajax 回调或异步代码中，可能就会被拦截。 例如...
前端小玩具~错误捕获定位工具
正文 我们在平时的工作中，开发功能的同时不可能把场景考虑的面面俱到，而生产环境往往情况是非常复杂的，用户录入进去的数据总是千奇百怪，那如果遇到问题的话，我们又要如何进行排查呢？总不可能让用户录个屏吧哈哈 所以我们就出现了 前端埋点 的操作，不过埋点的方向以及文章都挺多的，也都挺复杂的，这篇文章我们就讲一个比较有趣的 错误捕获思路 。 我们平时在使用框架开发 遇到bug 时，比如 Vue ，如果是在本地环境，我们在控制台可以很容易的找到出...
古卷轴展开动画
本文主要介绍了古卷轴展开动画的实现，包括 jquery 版本和 react 版本，还实现了从中间展开的动画效果和从右向左展开的动画效果。 当然，还可以结合 效果，实现古诗词淡入动画和古画卷展开动画的组合效果。 jquery 版本 在网上找了一个 jquery 版本的实现，具体 demo 可以查看下列网址： 动画实现代码如下所示，直接从 demo 中复制过来，直接使用即可。 react 版本 上述是用 jquery 实现的版本，但是一般现...
如何判断鼠标点击了元素的外部
1\. 前言 在实际开发时会有这样的需求：点击某一个按钮出现一个弹窗，然后点弹窗的其他区域时需要关闭弹窗，如果是点击的弹窗本身，除非是关闭操作，否则不关闭弹窗。本文将简单介绍几种这种需求的几种实现方案。 2\. 实现 2.1. 通过失焦事件来实现 首先，失焦事件并不是表单元素的专利，通过添加tabindex可以可以让任意一个元素获取失焦事件。 什么是 ？ 属性可以有三个值： ：元素可以获得焦点，并且可以通过键盘导航（通常是Tab键）到达...