开始学习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 回调或异步代码中，可能就会被拦截。 例如...
如何判断鼠标点击了元素的外部
1\. 前言 在实际开发时会有这样的需求：点击某一个按钮出现一个弹窗，然后点弹窗的其他区域时需要关闭弹窗，如果是点击的弹窗本身，除非是关闭操作，否则不关闭弹窗。本文将简单介绍几种这种需求的几种实现方案。 2\. 实现 2.1. 通过失焦事件来实现 首先，失焦事件并不是表单元素的专利，通过添加tabindex可以可以让任意一个元素获取失焦事件。 什么是 ？ 属性可以有三个值： ：元素可以获得焦点，并且可以通过键盘导航（通常是Tab键）到达...
你还不会根据Url下载文件？
最近遇到了一个需求，是需要前端通过Url去下载文件，于是研究了一波，便想着跟大家分享一下。 废话不多说，我们直接开始正文。 1.链接强制下载 最简单方式就是需要让服务端，给这个下载地址设置response header，使得url具有强制下载属性。 具体的设置： 这个header的意思是设置文件显示方式为直接下载，默认的文件名为image.jpg。 这里简单介绍下Content Disposition： Content Disposit...
做了这么久前端还不会手写瀑布流？(H5 & 小程序
前言 做了7年前端我一直不知道瀑布流是什么（怪设计师不争气啊，哈哈哈），我一直以为就是个普通列表，几行css解决的那种。 当然瀑布流确实有css解决方案，但是这个方案对于分页列表来说完全不能用，第二页内容一出来位置都变了。 我看了一下掘金的一些文章，好长啊，觉得还是自己想一下怎么写吧。就自己实现了一遍。希望思路给大家一点帮助。 分析瀑布流 以小红书的瀑布流为例，相同宽度不同高度的卡片堆叠在一起形成瀑布流。 这里有两个难点： 卡片高度如何...