前端用JS实现一个向手游中可以360度滑动方向的控制轮盘。 这是从我的项目中抽出来的代码DEMO： 注： 因为是用在3D中，所以在屏幕中y轴的滑动对应的是3D世界中的z轴。所以代码中会有y,z，要注意区分。...
51
canvas
微信阅读
前言 最近用微信阅读网页版时突然想到的。看了源代码，因为压缩了并没有看出什么有价值的东西。于是自己尝试了一下如何实现。 不知道微信阅读用的是什么Canvas JS库，我用了自己比较熟悉的FabricJS 主要尝试实现的两点功能： 文字自动换行 对文字选择划线 成果 这是我尝试的结果：...
158
前言废话 听歌时偶然发现了酷狗音乐APP的歌词增加了粒子效果。感觉很酷。然后就尝试着用JS在前端实现了一下。细节和酷狗还有差距。主要是尝试一下实现思路。 先看效果： 录屏效果太差了，直接看在线演示好一些...
257
整体介绍 用过Vue, React等现代前端框架的，对此概念会很熟悉： Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。 与框架不同的是，它是原生，无任何依赖的组件方案。 先来看下Web Components的三个要素。 一、Custom elements（自定义元素）...
335
一直以来我都认为Canvas API中，文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现，有相关的API。真的是有种 “难道我一直是个SB ？”。 获取文本宽度 measureText() measureText(text) 方法参数为需要测量的文本, 返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度） 例如，用红色背景完整包裹文字： const canvas = document.querySelecto...
506
前言 这是HTML5时代(ES6)可以跨过页面，页签。直接从系统层面弹出消息通知的API。 Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。 权限申请 想使用此API需要用户授权。所以需要先申请授权： Notification.requestPermission().then(function(p...
371
Broadcast Channel
PostMessage
跨域通信
同源能信
前言 目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel API Broadcast Channel API 可以实现同 源 下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。 通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息。一个有意思的点...
460
前言 坚持写博客第32天： 了解现代Web API之WakeLock保持屏幕换醒状态 WakeLock 这是一个实验中的功能,并不是所有浏览器都支持。当应用程序需要保持运行时，屏幕唤醒锁定API提供了一种防止设备变暗或锁定屏幕的方法。 例子： navigator.wakeLock.request("screen") WakeLock.request() 安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。 WakeLock.request...
544
使用JavaScript AudioContext相关API实现的音乐播放，同步显示歌词(LRC)，频谱以及进度显示和改变播放进度等。 其中进度相关的实现感觉还是不太对路，暂时也没有查到对路的方法。不清楚为什么context.currentTime不是buffer实时的currentTime。 对于这个问题，后面BufferSource换用HTML5 Audio标签（mediaElement）做为AudioContext就简单多了。。。应该是两者的应用场景不同，我还没搞清楚吧。 注意：以下...
409
