ry928330
ry928330
```ts // 你的答案 type First = T extends [infer FirstEle, ...infer RestEle] ? FirstEle : never; ```
```ts // 你的答案 type MyReadOnly = { readonly [Key in keyof T]: T[Key] extends object ? MyReadOnly : T[Key] } ```
有节奏的音乐跳动
### 写在最前：  最近在做一些新技术的调研，不巧在掘金上看到有人分享系列关于h5技术的运用，主要包括一些音频，媒体流，用户位置，环境光等H5核心设备接口的运用，所以自己准备照着那个目录动手做一番。这篇就是关于音频对象AudioContext做的小小DEMO，当然看了下别人的DEMO了，希望各位读者喜欢~  照例，贴下[我的博客](https://github.com/ry928330/blog)地址，别忘了去点赞哈~ ### 成果展示：  ### Git地址： https://github.com/ry928330/web-audio.git ### 功能说明： 1.根据你在页面载入的音乐，以可视化的方式展示音乐的律动； 2.点击模式切换，以时域波形的方式展示当前音乐的节奏。 ### 实现细节：  整个DEMO其实比较简单，主要就是熟悉一些跟[Web Audio](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API)相关的API，所以讲解的时候我会介绍下本次DEMO用到的一些API的使用方式。还有，本次DEMO的一个难点就是你看到的条形图上顶部小方块儿的下落特效，这个我也会做下解释。页面中所看到的动画都是基于canvas绘制，这个我就不多说了。接下来，进入主题。 > 创建基于audio的语音环境，代码如下： ``` window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext; var audioContext...
### 写在最前：  对于移动端页面的开发自己很早就想做下简单的总结了，但是来感觉不知道该从何说起，知道有一天看了两篇网上一位作者的文章（后面资源里面会给出链接），觉得写得真的是很好，但是还有一些问题我不是很清楚，所以自己也查阅了相关的文献，结合前面那位作者的一些思路，写下了这篇总结。当然，有说的不对的地方，还望指出，谢谢。 ### 准备工作：  照例，贴下[我的博客](https://github.com/ry928330/blog)地址，别忘了去点赞哈~ > 两个像素：设备像素+css像素 - 设备像素：绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 - css像素：适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。 > 页面的缩放： - 当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变。如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍 - 页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算) > 设备像素比（DPR）： - 在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 /...
# 简单的立体旋转特效DEMO实现 ### 写在最前：  前两天我们这边接到公司做教育那块的一个活儿，要做一个比较炫酷的3D旋转特效，拿到网页一看，别人是用Three.js去实现的，确实比较狂拽。但是我对这个只是了解一点点，还不到能用它做出成熟DEMO的地步（学习的道路任重而道远啊...）。所以老大建议用css transform特性加上perspective试试。嗯，活儿都来了，上呗。所以有了这边分享的诞生，但是我的实现肯定比不了Three那么炫酷，将就着看吧，里面有很多数学方面的推导是我请教部门清华的同事完成的，再次感谢他，下面我们来看看吧。  对了，惯例，[我的博客](https://github.com/ry928330/blog)点赞哈~ ### 成果展示：  ### Git地址： https://github.com/ry928330/transformConversion.git ### 功能说明: 1. 以屏幕中心为球心，屏幕横向为X轴，纵向为Y轴，垂直屏幕为Z轴，横向滑动屏幕，页面中的图标会绕着Y轴旋转。纵向滑动，图标会绕着X轴旋转，斜着滑，图标就会斜着转。 2. 点击页面中任意一个图标，被点中的图标会旋转到页面的中间（受perspective属性的影响，这个中间是一个近似的中间的位置） ### 实现细节：  按照功能我们从两个方面讲解DEMO的实现，一个是滑动屏幕，图标相应的滚动，另一个是点击图标，旋转到某一正确的位置。 > 滑屏转动图标：  因为画图比较麻烦，所以我借助草稿一起来分析下图标的转动，如下图所示：  从图中我们可以清楚的得到绕X、Y轴分别旋转后所在位置的X、Y、Z坐标，但是我要想要斜着滑动，的话就存在空间中的点同时绕X和Y轴的旋转，此时我们只需要要讲两个旋转矩阵相乘即可，即AB或者BA，如果是前者，表示先绕X轴旋转，然后再绕Y轴旋转，如果是后者则表示先绕Y轴旋转，再绕X轴旋转。因为每转动一个很小的角度我们都计算一下空间点的位置，所以你看不出先后顺序，给人的感觉是同时进行的。这里给出代码如下： ``` /** *...
# canvas之自定义头像功能实现 ### 写在最前：   前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的，没有安装过的还得手动去“允许”falsh的运行。所以让我用canvas实现一个一样的功能，嘿嘿，刚好最近也在研究canvas，所以欣然答应（其实，你没研究过难道就不答应么，哈哈哈哈哈~）   对了，大佬们记得给[我的博客](https://github.com/ry928330/blog.git)点赞，要星星哦~ ### 成果展示：  http://note.youdao.com/noteshare?id=74f38b8133da50a221345f3cdcf33782 ### Git地址: https://github.com/ry928330/portraitDIY.git ### 功能说明： 1. 拖拽左侧小方框，或者是鼠标放在小方框右下角，点击拉伸方框，方框覆盖部分的图片被自动截取下来，然后再在右侧的多个容器里面重绘。 2. 输入宽高，自定义你需要订制的头像大小，目前只支持宽高相同的头像图片。 ### 实现细节：   因为你要对图片所在的区域进行截图，所以你得制作一张canvas，盖在图片所在的区域。这里，我们给出了一个函数，根据传入的DOM里面元素的类名创建相同位置的canvas，盖在原来的DOM元素上面： ``` function createCanvasByClassName(tag) { var canvasInitialWidth = $('.'...
# canvas系列三之烟花效果实现 ### 写在最前:   唉，时间过得真是快啊，距离上次写demo已经是半个月前了，原来想得是每周写一篇的，但是前段时间工作微忙，所以就没有demo产出（嘿嘿，偷偷的给自己找了个借口，还不知道以后能不能坚持产出呢......）。这次写的还是canvas的东西，利用canvas写了一个燃放烟花的demo。感觉差不多再写一两个demo我就会对这个东西做一下最后的总结吧，毕竟老写demo也不是个事儿，总得总结下canvas这个东东。好了，废话不多说，我们直入主题   对了，大佬们记得给[我的博客赞](https://github.com/ry928330/blog.git)点赞，要星星哦~ ### 成果展示  http://note.youdao.com/noteshare?id=3e61d6236fd43a06cd47a62796901ca6 ### Git地址: ### 实现思路:   照例，我们还是用一种抛出问题的方式给出该次烟花demo的实现过程，小伙伴们在阅读的时候也可以通过这些问题自己想象可以怎么实现。 - 烟花的产生与消失，主要就是怎么来实现那种流星划过般的拖尾效果？ - 烟花消失后，如何产生爆炸后四散的效果？ - 四散的花火如何产生那种受"重力"影响而降落的效果以及花火的消失？   基本上，你做到了上述的三步，你的烟花效果就算是做出来了，哈哈，很简单吧。下面，我们逐个来解决。 ### 详细说明: > 烟花的产生于消失:   看过我之前[canvas系列之一](https://github.com/ry928330/screenShot.git)的伙伴们,或者对canvas动画有了解的同学肯定知道在canvas里面绘制的一个元素它是如何动起来的吧。我们是不是不断利用clearReact函数去帮助我们清除前一帧的动画。其实，我们如果不完全清除前一帧的动画，而是用一个比较透明的颜色去“盖住”呢？哈哈哈，是不是很简单，其实就一句代码： ``` ctx.fillStyle =...
```ts type MyOmit = {[Key in keyof T as Key extends K ? never : Key]: T[Key]} ```