本文实例为大家分享了three.js 全景重力感应的具体代码实现three.js 全景图 demo使用three.js 写了球体和圆柱体版本的3D重力感应全景图，支持手指触摸和陀螺仪感应，也支持PC端的鼠标。给大家介绍一下基于移动端H5球体的实现方法，圆柱体类似。设置容器和展示的样式设置容器的宽高为全屏展示，清除body的margin,引用three.min.js（3D渲染框架） 和orienter.js (陀螺仪经纬度计算)<div id="CanvasBody&quo...
移动端Web适配的两种做法思路总结
像素相关概念物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。其值也就是我们常说的分辨率设备独立像素(density-independent pixel)设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。简称dip，也可以称为CSS像素设备像素比(device pixel ratio...
监听input框变化，即时搜索 compositionstart， compositionend
前话： 如果直接通过input监听， 它是键盘输入按键按下了就触发时间，这样可能导致一些问题，比如在谷歌浏览器想输入中文输入不了；解决方案： 用 compositionstart 和 compositionend，这个会在选定文字后才出发 input 事件；注意：因为谷歌浏览器跟其他浏览器的执行顺序不同， 谷歌是 compositionstar => 监听input事件 => compositionend,其他浏览器是 compositionstart =&g...
纯前端下的音频剪辑处理
前言最近在做一个项目，需要对webRTC录制的音频进行处理，包括音频的裁剪、多音频合并，甚至要将某个音频的某一部分替换成另一个音频。原本笔者打算将这件工作交给服务端去完成，但考虑，其实无论是前端还是后台，所做的工作是差不多的，而且交给服务端还需要再额外走一个上传、下载音频的流程，这不仅增添了服务端的压力，而且还有网络流量的开销，于是萌生出一个想法：为什么音频处理这件事不能让前端来做呢？于是在笔者的半摸索半实践下，产生出了这篇文章。废话少说，先上仓库地址，这是一个开箱即用的前端音频剪辑sdk（点进...
微信H5 html2canvas截图在IOS13.4失效问题
分析问题：从用户处了解到全是IOS问题，找了半天没发现问题所在，加上公司同事手机都是Iphone，也都可以正常截图啊，无任何问题！！！看了看自己手机版本13.3.4，设置也有提示更新13.4.1，好家伙那更新下系统，再一探究竟，同时问了下出现问题的用户手机系统版本，竟然也是13.4.1，ok，那问题所在点基本是确定了，接下来就解决问题！解决问题：打开微信调试助手，连接手机进行移动端调试，点击分享图，静待出现报错原因，嘿嘿我擦勒，竟然没报错！！！没有任何问题，可就是不能生成图片！看来还得继续寻找问...
前端页面的适配使用rem换算
为什么要使用rem 之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。 例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。 Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算...