LENTON'S BLOG
Canvas中的文字居中和宽度
一直以来我都认为Canvas API中，文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现，有相关的API。真的是有种 “难道我一直是个SB ？”。
获取文本宽度
measureText()
measureText(text) 方法参数为需要测量的文本, 返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）
例如，用红色背景完整包裹文字：
const canvas = document.querySelecto
2022-08-25 14:32:37
1129
0
Notifications API系统通知
前言
这是HTML5时代(ES6)可以跨过页面，页签。直接从系统层面弹出消息通知的API。
Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。
权限申请
想使用此API需要用户授权。所以需要先申请授权：
Notification.requestPermission().then(function(p
2022-07-14 14:22:57
812
0
[34天] 各种好玩的WEB API
前言
最近读MDN Web API，发现了一些好玩有趣的API，也许在有些场景下十分有用，特此记录分享一下。
Web Speech API 语音识别与合成
语音识别与语音合成功能,
来吧，再控制台输入以下代码并回车，你听到了什么？
window.speechSynthesis.speak(new window.SpeechSynthesisUtterance('你好帅'))
你好帅！，没错这就是Web Speech API的语音合成能力了。真的是简单的另人发指啊。
2022-06-19 13:28:49
854
0
[33天] 不同窗口或iframe通信之Broadcast Channel API
前言
目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel API
Broadcast Channel API 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。
通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息。一个有意思的点
2022-06-18 17:29:23
1044
0
[32天] JS保持屏幕换醒状态
前言
坚持写博客第32天： 了解现代Web API之WakeLock保持屏幕换醒状态
WakeLock
这是一个实验中的功能,并不是所有浏览器都支持。当应用程序需要保持运行时，屏幕唤醒锁定API提供了一种防止设备变暗或锁定屏幕的方法。
例子：
navigator.wakeLock.request("screen")
WakeLock.request()
安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。
WakeLock.request
2022-06-17 10:12:12
990
0
[31天] 再探Audio 同步歌词,频谱,进度条控制
使用JavaScript AudioContext相关API实现的音乐播放，同步显示歌词(LRC)，频谱以及进度显示和改变播放进度等。
其中进度相关的实现感觉还是不太对路，暂时也没有查到对路的方法。不清楚为什么context.currentTime不是buffer实时的currentTime。
对于这个问题，后面BufferSource换用HTML5 Audio标签（mediaElement）做为AudioContext就简单多了。。。应该是两者的应用场景不同，我还没搞清楚吧。
注意：以下
2022-06-16 15:47:59
821
0
[26天] 页面刷新后滚动条回到顶部
浏览器默认行为
如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。
大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？
不优雅的方式：
在页面加载完成事件中执行：
document.documentElement.scrollTop = 0
原生的 API
浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。
只需在页面中执行：
2022-06-11 17:20:44
1698
0
[23天] JS各种抽奖效果实践
几种常见的抽奖效果俄罗斯大转盘跑马灯老虎机翻纸牌刮刮乐俄罗斯大转盘效果：实现思路：主要为css transform属性配合 rotate()旋转函数实现效果，加JS计算旋转的角度达到精确控制。实现思路简易Demo代码：俄罗斯大转盘.zip跑马灯效果：实现思路：使用css grid布局加JS控制实现思路简易Demo代码：choujiang-pmd.zip老虎机效果：.实现思路：使用css transform: translateY()控制上滚动画效果实现思路简易Demo代码：c
2022-06-08 20:27:53
1126
0
[21天] 前端开发chrome调试技巧
一、一键重新发起请求前端与后端联调时，最常见的就是后端反复的说：你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。按F12打开控制台选中Network标签找到Fetch/XHR 类型下我们刚发过的请求右键点击 Replay XHR命令 那如果要调整一个参数呢？二、修改请求信息后重新发起请求同上右键请求，选择copy -&g
2022-06-06 09:28:49
832
0
[19天] IndexedDB初学笔记(一)
前言
MDN介绍：IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaS
2022-06-04 14:49:12
755
0