【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换

前端修罗场

发布于 2023-10-07 18:24:01

2020

发布于 2023-10-07 18:24:01

文章被收录于专栏：Web 技术Web 技术

H5新特性

geolocation 地理定位,获取用户设备的经纬度
video,audio 视、音频 WebSocket推送video , canvas+video 视频上做图像处理,如特效
canvas 绘图
WebSocket 双工通信
localStorage 本地存储，代替cookie,cookie只能存储4k，而localStorage能存储5M
sessionStorage 关闭浏览器后就会消息，用于存储敏感信息，容量=5M，用的少
WebSQL 、IndexedDB 前端数据库，不安全，用的少(目前取消了)
WebWorker 把JS从单线程变成多线程（单线程，一次只能做一件事），使用场景缺少
文件操作拖拽、读取
manifest 离线应用文件，决定离线缓存什么文件；不实用，被APP取代；
…
…

geolocation

多用在M端；

软件并不能实时定位，需要硬件支撑。

PC与M端的定位方式不同；

M端使用GPS；PC使用IP地址：精度低；IP经常会变，需要一个IP库（网上搜有，如ip.taobao.com）

window.navigator.geolocation

只问一次单次：getCurrentPosition(成功,失败,参数) 获取当前位置监听：watchPosition(成功,失败,参数)

在Ghrome浏览器上，它会向Google发出请求获取结果，通常情况下会失败；

高精度定位，需要使用框架
enableHighAccuracy //高精度模式,慢、费电
timeout //超时时间，ms 单位
maximumAge //缓存获取位置的结果

结果：

accuracy 精确度
altitudeAccuracy 高度精确度
heading 朝向
speed 速度,不太准；可以使用计算（前一次与这次）获取的经纬度计算运动距离与时间差，获取速度

video && audio

兼容video:

<video>
	<object type ="" params="">
	</object>  //flash
</video>

支持格式（不同浏览器不同,版权原因）IE：wmv、mp4;Chrome: webq、mp4;FireFox:ogv、mp4
点播：防止视频被抓取 src:blob
可以用js 操作video、audio
进度：parseInt(100*v.currentTime/v.duration)+‘%’
autoplay 在很多浏览器会被自动禁用，但可以使用js 进行控制
播放速度 1:1,1:1.05… 方法1：压制成不同版本的文件、方法2：点播时，调整码率；都需要服务器处理；自带属性playbackRate
宽高适配：先判断比例如适配W=600,H=400的容器

w = 600
H = 400

if(w/h>W/H){ //偏宽
	//让宽度适应容器宽度
	h = H*w/W
	w = w
}	else {
	h = H
	w = W*h/H
}

试看：不能用客户端实现；使用服务器控制：服务器生成两段视频，如没登陆的用户生成试看；登陆的生成完整的；
如何去掉video/audio 自带的control 的下载按钮：使用流视频文件；

Web Workers 浏览器上实现的多进程

主机 > 程序 > 进程 > 线程 > 纤程

多进程与多线程多进程：性能低、编写简单；进程之间是隔离的；共享资源麻烦；开销大; 多线程：性能高、编写复杂；线程之间是共享的；共享资源方便；开销小; 多任务：多个程序执行 java \ C 多进程、多线程 PHP 多进程 JS 多进程
主进程(UI进程)：只有一个。
子进程（工作进程）：只能完成计算、数据请求等操作。

每个Web Workers都有自己的全局运行环境，其功能只是Javascript特性的一个子集。Worker运行环境由如下部分组成：

一个navigator对象，只包括四个属性 ：appName、appVersion、user Agent 、platform
一个location对象,与window.location相同，不过其所有属性是只读的
一个self对象，指向全局worker对象
一个importScripts()方法，加载Worker所用到的外部Javascript文件
所有的ECMAScript对象，如：Object、Array、Date等
XMLHTTPRequest构造器
setTimeout()和setInterval()方法
一个close()方法，能立刻停止Worker运行

//1、创建子进程
let w = new Worker('w1.js');//不能跨域
//2 发送
w.postMessage({});

//w1.js
//3、接收
//4、处理任务
//5、返回

//6、接收结果

多个进程能同时工作，充分利用资源
防止主进程卡机
不能执行任何UI操作；子进程只能执行计算型任务；
Web Workers在工作中用的很少——Web中计算型任务不多；

我们知道，js是单线程运行的，这个特点可能会造成当某个操作特别耗时的时候，页面出现崩溃或无响应的状态。

Web Workers 能够赋予js多线程的能力，实质上是开启一个Web Workers线程，用于处理这些耗时的计算。

下面，通过一个示例说明——计算斐波那契数列：

知识：斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233，377，610，987，1597，2584，4181，6765，10946，17711，28657，46368…这个数列从第3项开始，每一项都等于前两项之和。在数学上，斐波纳契数列以如下被以递推的方法定义： F(1)=1，F(2)=1, F(n)=F(n-1)+F(n-2)（n>=3，n∈N*）

下面，我们通过Web Workers 计算它。我们将线程分为UI线程和Web Workers线程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web workers</title>
</head>
<body>
    <div class="calc">
        <input type="text" id="text" />
        <input type="button" value="获取结果" id="btnCal"/>

    </div>
    <p>结果:</p>
    <p class="result" id="result"></p>
    <script>
    //UI 线程，用以处理DOM操作
        var input = document.getElementById("text"),
            cal = document.getElementById("btnCal"),
            result = document.getElementById("result");
        var getResult = function(){
            var initVal = input.value;
            var w = new Worker("./worker.js"); //创建web worker线程
            w.postMessage(initVal); //向web worker 发送消息
            w.addEventListener("message",function(event){ //接收Web workers 线程传回的消息
                result.innerHTML = result.innerHTML + initVal + "斐波那契数列："+event.data ;
            },false)
        }
        cal.addEventListener("click",getResult,false);
    </script>
</body>
</html>

web workers线程 worker.js

//web workers线程 ,用以处理耗时计算操作
function fibonacci(n){
    return n<2 ? n : fibonacci(n-1) + fibonacci(n-2);
}
this.addEventListener("message",function(event){ //接收UI线程传递过来的消息
    var resultVal = fibonacci(event.data);//计算对应的值
    this.postMessage(resultVal);   //将计算结果发送给UI线程
})

从上述，我们知道，Web Workers适合处理纯数据，或者与浏览器UI无关的长时间运行脚本。

我们在来看一个例子：用Web Workers 处理大的JSON字符串：

假设这个JSON字符串的数据量足够大，至少需要500ms才能解析完成，至于干扰了用户体验。

var worker = new Worker("jsonparse.js");
//数据就位时，调用事件处理器
worker.onmessage = function(event) {
	var jsonData = event.data;//JSON结构
	evaluateDate(jsonData);//使用JSON结构
}

worker.postMessage(jsonText);//传入要解析的大段JSON字符串

web workers 脚本：jsonparse.js

//当JSON数据存在时，该事件处理器会被调用
self.onmessage = function(event) {
	//JSON字符串由event.data传入
	var jsonText = event.data;
	//解析JSON字符串
	var jsonData = JSON.parse(jsonText);
	//回传解析结果
	self.postMessage(jsonData);
}

拖拽

<div id="div1">将文件拖拽至此区域</div>

window.onload = function(){
	let oDiv = document.getElementById('div1');
	
	//ondragenter  进入
	//ondragleave  离开
	//ondragover   悬停   
	//ondrop       松开鼠标,如果dragover 不阻止默认事件，drop事件不会发生
	
	
	oDiv.addEventListener('dragenter',function() {
		oDiv.innerHTML = '释放鼠标';
	},false);
	oDiv.addEventListener('dragleave',function() {
		oDiv.innerHTML = '将文件拖放至此区域';
	},false);
	oDiv.addEventListener('dragover',function(e) {
		e.preventDefault(); //阻止默认事件
	},false);
	oDiv.addEventListener('drop',function(e) {
		console.log(e.dataTransfer.files)
		e.preventDefault();
	},false);
}

富文本编辑器

contenteditable H5属性
tinymce 编辑器

FileReader

let reader = new FileReader();

reader.onload = function(){}
reader.οnerrοr= function(){}
reader.readAsText(param) //文本 --适合文本文件
reader.readAsDataURL(param) //base64 – 适合图片
reader.readAsArrayBuffer(param) //把文件内容保存为字节，原始的二进制数据 – 适合编辑，不实用
reader.readAsBinaryString(param) //把二进制数据转为字符串 – 适合上传

canvas 画布

什么东西都能画
宽高必须用属性的方式写
性能很高——适合大型动画、游戏
getContext() 图像上下文，绘图接口
路径操作：一个范围，没有图形 moveTo LineTo
描边、填充、颜色 stroke strokeStyle fill fillStyle
清除之前所有的路径 beginPath
闭合路径 closePath
gd.rect(x,y,w,h) //矩形路径
gd.arc(cx,cy,r,startAng,endAng,是否逆时针) 弧路径 区分角度（度）与弧度(PI)，角度到弧度的换算：360度=2PI弧度

<canvas id="c1" width="100" height="100">
	浏览器不支持canvas
</canvas>

window.onload = function(){
	let oC = document.getElementById('c1');
	let gd = oC.getContext('2d');//获取图形上下文，绘图用的接口（环境）
	//路径操作---**与PS中的选区一样，框定一个操作的范围**
	gd.moveTo(100,100);
	gd.lineTo(300,200);
	gd.lineTo(130,350);
	gd.closePath(); //封口、闭合
	//描边
	gd.stroke(); 
	
}

画多条线

画之前先清除之前所有的路径

gd.beginPath();

鼠标画图

<canvas id="c1" width="100" height="100">
	浏览器不支持canvas
</canvas>
window.onload = function(){
	let oC = document.getElementById('c1');
	let gd = oC.getContext('2d');
	
	let lastX,lastY;
	
	oC.onmousedown = function(ev){
		lastX = ev.offsetX; //当前位置
		lsstY = ev.offsetY;
		
		oC.onmousemove = functioin(ev) {
		   
		   gd.beginPath();
		   
			gd.moveTo(lastX,lastY);
			gd.lineTo(ev.offsetX,ev.offsetY);
			
			lastX=ev.offsetX; //前一次位置
			lastY=ev.offsetY;
			
			gd.stoke();
		
		},
		oC.onmouseup = function() {
			oC.onmousemove = null;
			oC.onmouseup = null;
		}
	}
}

画饼图
1、数据
2、总和
3、数据占比->转为角度占比
4、画–以上一个pie的结束角作为下一个pie的开始

function pie(startAng,endAng,color){
gd.beginPath();
let data= [100,300,200,150];
let colors = ['#000','#ccc','red','yellow']
let sum = data.reduce((tmp,item,index)=>tmp+item);

let angs = data.map(item=>360*item/sum);

let last = 0;

angs.forEach(ang=>{
	pie(last,last+ang,colors[index]);
	
	last+=ang;
})

}

如何让图形动起来（联系gif动画，帧）

1、canvas里的图形，只要画完了，就不能修改,因为canvas不会保存任何的图形信息； 2、gd.clearRect(x,y,w,h) 擦除一块区域，一般擦去整个画布:

gd.clearRect(0,0,oC.width,oCheight)

如何给图形增加事件

1、canvas本身没有事件 2、canvas中的事件操作要自己定义；

let 1=50,t=50,w=100,h=70;
gd.strokeRect(l,t,w,h);
oC.onclick = function(ev){//确定鼠标点击在区域内
  if(ev.offsetX>=1 && ev.offsetX<=l+w 
  &&ev.offsetY>=t  && ev.offsetY<=t+h){
  }else {}
}

//计算点至圆心的距离

oC.mousemove = function(ev){
	let a = ev.offsetX - cx; //横向距离
	let b = ev.offsetY - cy; //纵向距离
	let dis = Math.sqrt(a*a+b*b); //实际距离，利用勾股定理
	gd.beginPath(); 
	gd.arc(cx,cy,r,0,2*Math.PI,true);
	if(dis<=r){ //距离小于半径
		gd.fillStyle = 'yellow';
	}else {//距离大于半径
		gd.fillStyle = '#ccc';
	}
	gd.fill();
}

碰撞检测：矩形、圆形

高维检测

canvas变换 rotate translate scale

使用变换之前，先save()后restore()

角度转弧度/弧度转角度

function d2a(n){
	return n*Math.PI/180;
}
function a2d(n){
	return n*180/Math.PI;
}
window.onload = function(){
	let oC = document.getElementById('c1');
	let gd = oC.getContext('2d');
	
	let rotate = 0;
	
	gd.strokeRect(100,100,300,200);
	
	setInterval(function(){
		gd.clearRect(0,0,oC.width,oC.height);
		rotate++;
		gd.save(); //保存当前canvas的状态，如颜色、线宽、旋转、translate,但不包括图形本身
		gd.translate(250,200); //先translate再rotate
		gd.rotate(d2a(30)); //旋转单位：弧度；旋转以画布左上角为中心点旋转，而不是图形的中心
		gd.strokeRect(-150,-100,300,200);
		gd.restore();//恢复状态
	},16);
}

canvas中处理图片

<canvas id="c1" width="800" height="600"></canvas>
window.onload = function(){
	let oC = document.getElementById('c1');
	let gd = oC.getContext('2d');
	
	let oImg = new Image();
	
	oImg.src = 'logo.png';
	
	oImg.onload = function() {//需要等到img加载完成才能drawImage
	
		gd.clearRect(0,0,oC.width,oC.height);
		
		//1、简易版 3个参数
		//drawImage(img,x,y); //img要是真正的图片
		gd.drawImage(oImg,0,0);
		
		//2、完整版 9个参数,**适合做帧动画**
		/*drawImage(
			img,
			sx,sy,sw,sh,    s-source 源 ：从哪取
			dx,dy,dw,dh     d-desitination 目标 ：放到哪
		)
		gd.drawImage(
			oImg,
			50,50,32,32,
			200,200,32,32
		)
		*/
	}

}

canvas 像素级操作每个像素占4位 : r - g - b - a

window.onload = function(){
	let oC = document.getElementById('c1');
	let gd = oC.getContext('2d');
	
	let oImg = new Image();
	
	oImg.src= '1.jpg';
	oImg.onload = function(){
		gd.drawImage(oImg,0,0);
		//获取一块像素区
		let imageData = gd.getImageData(0,0,oC.width,oC.height);
		//一个数组，每个像素的信息  imageData.data
		alert(
			r: ${imageData.data[0]}\n
			g: ${imageData.data[1]}\n
			b: ${imageData.data[2]}\n
			a: ${imageData.data[3]}\n  
		）
		//**操作像素点的颜色**
		for(let r=0;r<oC.height;r++){
			for(let c=0;c<oC.width;c++){
				let avg = (imageData.data[(r*oC.width+c)*4]+imageData.data[(r*oC.width+c)*4+1]+imageData.data[(r*oC.width+c)*4+2])/3;
				imageData.data[(r*oC.width+c)*4]+imageData.data[(r*oC.width+c)*4+1]+imageData.data[(r*oC.width+c)*4+2] = avg;
			}
		}
		gd.putImageData(imageData,0,0);
	}
	
}

若有800列 W）600行（H）的数组像素，要获取r行c列：