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
CSS文字折行知识大全
是不是在用CSS做文字排版时，经常会遇到并搜索这些问题：
CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行...
本文会解决以上的全部问题困扰！
说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住，在需要时，打开本页面当字典查阅一下就可以了。
2022-07-06 10:13:41
1293
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
[30天] CSS Media query几种非常用媒介查询
乍一想，好像媒介查询很简单，已经一直在用的东西，还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用！
我以为我所熟知的：
@media (max-width: 640px) { /* css here */}
就这？
大佬教我的：
一、媒介查询的更多打开方式
媒介查询不只是能用在CSS代码块中，还可以用在引入CSS的链接中，甚至是JavaScript中。
例如：
<link rel="stylesheet" href="default.css"&g
2022-06-15 11:54:16
784
0
[29天] 再探CSS3D
第29天了，不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念，就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方，这样就建立了一个左手坐标系。其中，拇指、食指和其余手指分别代表x，y，z轴的正方向
2022-06-14 18:32:25
839
0