HTML学习笔记

TIPS

前端HTML学习笔记

常用标签

• 标题标签 h1~h6
• 倾斜 <i></i> <em></em>
• 加粗 <b></b> <strong></strong>
• 下划线 <u></u>
• 空标记 <br>, 注意 clear 属性的使用
• 水平线 <hr>
• 段落 <p></p>
• 块标记 <div></div>
• 行内标记 <span></span>
• 链接 <a href="链接">链接内容</a>
• 图片 <img src="路径" alt="" title="" /> src和alt是必需的, alt规定图片被替换的文本, 例如加载失败, title和其他元素相同表示提示信息
• 列表
  • 无序列表 <ul><li></li></ul>
  • 有序列表 <ol><li></li></ol>
  • 自定义列表 <dl><dt></dt><dd></dd></dl> ul, ol, li 上都有 type 属性, 规定序号类型, 有序列表支持 1, a, A, i, I 无序列表支持 disc, square, circle, 有序列表额外支持 reversed倒序和start开始序号

特殊符号的写法:

• 不换行空格 &nbsp
• 右尖括号 &gt
• 左尖括号 &lt
• 备案中图标 &copy

表格

<!-- tr 元素定义表格行, th 元素定义表头, td 元素定义表格单元 -->
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

表格的相关属性

• width="表格的宽度"
• height="表格的高度"
• border="表格的边框"
• bordercolor="边框色"
• cellspacing="单元格与单元格之间的间距"
• cellpadding="单元格与内容之间的空隙"
• align="表格对齐方式" 取值: left/right/center
• valign="垂直对齐" 取值: top/bottom/middle
• colspan="所耍合并的单元格的列数"
• rowspan="所要合并单元格的行数"

表单

<form name="表单名称" method="post/get" action="">
  文本框: <input type="text" value="默认值" />
  密码框: <input type="password" />
  提交按钮: <input type="submit" value="按钮内容" />
  重置按钮: <input type="reset" value="按钮内容" />
  单选框1: <input type="radio" name="radio" value="单选框1" />
  单选框2: <input type="radio" name="radio" value="单选框2" />
  <!-- 单选框name要相同 -->

  复选框: <input type="checkbox" name="" />
  <!-- 禁用: disabled="disabled" -->
  <!-- 默认选中: checked="checked" -->

  按钮: <input type="button" value="按钮内容" />
  下拉菜单
  <select>
      <option>下拉选项1</option>
      <option>下拉选项2</option>
  <select>
  多行文本框
  <textarea rows="" cols=""></textarea>
  <!-- 说明: rows 属性和 cols 属性用来设置文本输入窗口的宽度和高度, 几行几列, 以平均字符数计 -->
  <!-- 禁止拉伸: style="resize:none" -->
</form>

HTML5

HTML5新增标签

语义化标签, 块级元素

1. header
2. footer
3. article → div
4. section → p
5. nav导航条
6. aside局部
7. svg
8. canvas
9. Audio音频播放
10. Video视屏播放
11. 自定义标签: 行级元素

HTML5新增属性

1. Contenteditable 用户能否修改页面上的内容, 默认false
2. Draggable 支持拖放
3. Hidden隐藏
4. Contextmenu 为元素设定快捷菜单 (目前无浏览器支持ontextmenu属性
5. data-val自定义属性

拖放

属性: draggable: auto | true | false

拖动事件:

• dragstart在元素开始被拖动时触发
• dragend在拖动操作完成时触发
• drag在元素被拖动时触发

释放区事件:

• dragenter被拖动元素进入到释放区所占据得屏幕空间时触发
• dragover当被拖动元素在释放区内移动时触发
• dragleave当被拖动元素没有放下就离开释放区时触发
• drop当被拖动元素在释放区里放下时触发
• dataTransfer用于拖放的时候传递数据

Canvas

1. 添加canvas标签

   <canvas width=500 height=500></canvas>
   

2. 获得canavs元素

   var canvas=document.getElementByld(myCanvas');
   

3. 获得canvas上下文对象 (画笔)

   var ctx=canvas.getContext('2d');
   // 两个对象
   // 1. 元素对象(canvas元素) 和上下文对象 (通过getContext('2d') 方法获取到的CanvasRenderingContext2D对象)
   // 2. 元素对象相当于我们的画布, 上下文对相当于画笔, 我们接下来的所有操作是基于上下文对象的
   

4. 绘制线段

   1. ctx.moveTo(x,y); 移动到x, y坐标点 (相当于起始点)
   2. ctx.lineTo(x,y); 从当前点绘制直线到x, y点
   3. ctx.stroke(); 描边 ctx.strokeStyle = 'color'画笔颜色
   4. ctx.lineWidth=20; 设置线段宽度
   5. ctx.closePath(); 闭合当前路径 和回到起始点的区别
   6. ctx.fill(); 填充
   7. ctx.beginPath(); 另起一条路径, 相当于又设置了moveTo

   TIPS

   fill 和 stroke 方法都是作用在当前的所有子路径

   完成一条路径后要重新开始另一条路径时必须使用 beginPath() 方法, beginPath 开始子路径的一个新的集合

5. 绘制矩形

   • ctx.rect(x,y,dx,dy); (x, y是起始位置, dx, dy宽高), 后面需要调用stroke()或者fill()才能画
   • ctx.fillRect(x,y,dx,dy);直接绘制填充的矩形
   • ctx.strokeRect(x,y,w,h);绘制不填充的矩形 橡皮擦
   • ctx.clearRect(x,y,dx,dy);

实现矩形落地动画 6. 绘制弧形

• arc(x,y,r,起始弧度, 结束弧度, 弧形的方向) 圆心坐标, 半径
• 角以弧度计Math.PI, 0顺时针, 1逆时针
• 绘制圆角 (类似border-radius)
• ctx.arcTo(x1,y1,x2,y2,r)
• 绘制的弧线与当前点和x1,y1连线, x1,y1和x2,y2连线都相切

贝塞尔曲线

quadraticCurveTo(x1,y1,ex,ey) 二次贝塞尔曲线

• x1,y1控制点
• ex,ey结束点

bezierCurveTo(x1,y1,x2,y2,ex,ey)三次贝塞尔曲线

• x1,y1,x2,y2控制点
• ex,ey结束点

坐标轴转换

1. translate(dx,dy) 重新映射画布上的 (0,0) 位置, 坐标轴平移
2. scale(sx,sy) 缩放当前绘图,缩放坐标轴
3. rotate(Math.PI) 旋转当前的绘图
4. save() restore0

保存当前图像状态的一份拷贝 (保存画布状态,坐标轴) 从栈中弹出存储的图形状态并恢复 setTransform(a,b,c,d,e,f)先重置再变换 参数: 水平缩放, 水平倾斜, 垂直倾斜, 垂直缩放, 水平移动, 垂直移动 transform(a,b,c,d,e,f)在之前的基础上变换

填充图案

1. createPattern(image,"repeat l repeat-x l repeat-y l no-repeat")
2. img元素(Image对象) , canvas元素, video元素 (有图形的)

渐变

1. createLinearGradient(x1,y1,x2,y2);线性渐变必须在填充渐变的区域里定义渐变, 否则没有效果
2. createRadialGradient(x1,y1,r1,x2,y2,r2);径向渐变
3. bg.addColorStop(p,color);设置渐变颜色, p是0到1之间

阴影

1. ctx.shadowColor
2. ctx.shadowOffsetX
3. ctx.shadowOffsetY
4. ctx.shadowBlur

注: 这里的阴影偏移量不受坐标系变换的影响

文本

1. fillText()
2. strokeText()
3. measureText('hello world')

线段样式

1. lineCap
2. lineJoin

裁剪

ctx.clip();当前路径外的区域不再绘制, 可通过save()保存, restore()恢复

合成

1. ctx.globalCompositeOperation: 'source-over'

   新像素和原像素的合并方式

2. 11种值默认source-over w3c标准

3. 常用source-over,destination-over,copy

全局透明度

ctx.globalAlpha = ""

绘制图片

1. ctx.drawlmage();

   第一个参数是img(lmage,canvas,video) 注: onload

2. 3个参数 (x, y)

   起始点坐标

3. 5个参数区 (x, y, dx, dy)

   起始点坐标及图片所存区域的宽高

4. 9个参数 (x1, y1,dx1,dy1,x2, y2,w2,h2)

   前四个为所绘制目标元素的起始点和宽高, 后四个为canvas绘制的起始点和大小:

获取canvas像素信息

1. ctx.getlmageData(x,y,dx,dy)//同源策略
2. ctx.createlmageData(w,h)创建新的空白ImageData 对象//一般不用
3. ctx.putlmageData(imgData,x,y)将图像数据放回画布上

高斯模糊: 把图片通过drawImage画到画布上, 然后getImageDate, 然后处理数据, 最后putImageDate

SVG矢量图

每个标签都是独立的, 不会互相影响

开始
<svg width='500px' height="500px" ></svg>
<!-- 1. 直线 需要在css里写stroke-->
<line x1="100" y1="100" x2="200" y2="100"></line>
<!-- 2. 矩形 rx和ry表示圆角-->
<rect x="50" y="50" width="100" height="100" rx="10" ry="20"></rect>
<!-- 3. 圆形 -->
<circle r="50" cx="220" cy="100"></circle>
<!-- 4. 椭圆 -->
<ellipse rx="100" ry="50" cx="400" cy="150"></ellipse>
<!-- 5. 折线 -->
<polyline points="60 50, 75 35,100 50, 125 35,150 50, 175 35, 190 50"></polyline>
<!-- 6. 多边形 (会把折线的起始位置连起来) -->
<polygon points="125 125, 130 140, 120 140"></polygon>
<!-- 7. 文本 -->
<text x="125" y="220">hello,world</text>

样式属性

1. fill填充
2. stroke描边
3. stroke-width
4. stroke-opacity/fill-opacity
5. stroke-linecap
6. stroke-linejoin连接样式

Path元素

<!-- moveTo lineTo -->
<!-- 1. M指令和L指令 -->
<path d="M10 10 L 20 10"/>
 <!-- m 指令和 l 指令 -->
<path d="m 10 10 l 20 10"/>
<!-- 大写表示绝对定位, 小写表示相对定位 -->
<!-- 绝对坐标和相对坐标相对于上一个移动距离 -->
<!-- 2. H和V命令 -->
<path d="M 100 100 H 200 V 200"/>
<!-- 水平 (horizontal lineto)竖直(vertical lineto)方向移动距离 -->
<!-- 3. Z命令 -->
<path d="M 100 100 H 200 V 200 z"/>
<!-- 注: 自动闭合路径    Z不区分大小写 -->
<!-- 圆弧指令
4. A命令(elliptical Arc) 七个参数
rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx ry圆弧的x轴半径和y轴半径
x-axis-rotation圆弧相对x轴的旋转角度, 默认是顺时针, 可以
设置负值
large-arc-flag表示圆弧路径是大圆弧还是小圆弧 1表示大圆弧
sweep-flag表示从起点到终点是顺时针还是逆时针, 1表示顺
时针, 0表示逆时针
x, y表示终点坐标, 绝对或相对 -->
<path d="M 100 100 A 70 120 90 1 1 150 200"></path>
<!-- 1, 二次贝塞尔
Q x1 y1, x y
T x y 扩展点
2.三次贝赛尔曲线
C x1 y1,x2 y2 x y
S x2 y2,x y -->

1. 线性渐变

   <defs>
     <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">
       <stop offset="0%" style="stop-color:rgb (255, 255, 0);"/>
       <stop offset="100%" style="stop-color:rgb (255, 0, 0);"/>
     </linearGradient>
   </defs>
   <rect x="0" y="0" width="500" height="500" styIe="fill:url(#bg1)"/>
   

2. 径向渐变

   <defs>
   <radialGradient id="bg2" cx="50%"cy="50%" r="50%"
   fx="50%" fy="50%" /d>
   <stop offset="0%"style="stop-color.green;" />
   <stop offset="100%"style="stop-color:red;" />
   </radiaIGradient>
   </defs>
   <rectx="0"y:"0"width="500"height="500"style="fill:urI(#bg2)"/>
   
   <!-- 高斯滤镜 -->
   <defs>
   <filter id="Gaussian_Blur">
   <feGaussianBIur in="SourceGraphic" stdDeviation="20"/>
   </filt&>
   </defs>
   <rect x="0" y="0"width="500"height="500"fill:"yellow"
   style="filter:urI(#Gaussian_Blur)"/>
   
   <!-- 其他滤镜 -->
   <!-- http://www.w3school.com.cn/svg/svg_filters_intro.asp -->
   

SVG路径动画

1. stroke-dasharray: 100px;切割线段, 展示成虚线
2. stroke-dashoffset:15px;线条的偏移量

Js操作svg

1. getTotaILength

   获取路总长度

2. getPointAtLength(x)

   获取路径上距离起始点距离x长度的点的坐标

   注: 严格来说上面两方法只适用于path元素, 但各个浏览器实现起来都会有一点区别, 例如谷歌浏览器也能获取到line元素的路径长度

viewPort , 表示SVG可见区域的大小, 画布大小,

<svg width="500" height:"300"></svg>
<!-- 宽500单位, 高300单位 -->

<!-- ViewBox表示视区盒子 -->
<svg width="400"height-"300" viewBox="0, 0, 40, 30"
style="border:  1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>
<!-- viewBox定义了svg图内部的相对像素大小 -->

preserveAspectRatio (作用的对象都是viewBox)

preserveAspectRatio="xMidYMid meet" svg.setAttribute("preserveAspectRation,"xMinYMin meet"); 第1个值表示, viewBox如何与SVG viewport对齐; 第2个值表示, 如何维持高宽比 (如果有的话) x和y都有min mid max表示左 中 右

meet: 保持纵横比缩放viewBox适应viewport

slice: 保从横比同时比例小的方向放大填满viewport (均匀缩放的同时保持viewbox的宽高比) none:扭曲纵横比以充分适应viewport

js生成svg元素

var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');

属性只能通过setAttribute设置

	Canvas	SVG
操作对象	基于像素(动态点阵图)	基于图形元素
元素	单个HTML	多个图形元素(Path, Rect, Line...)
驱动	只能脚本驱动	支持脚本和CSS
事件交互	用户交互到像素点(x, y)	用户交互到图形元素(rect, path)
性能	适合小面积大数量	适合大面积小数量

audio元素和video元素

<audio id="audio" src="./xxx.mp3"></audio>
<video id="video" src="./xxx.mp4"></video>

属性

1. controls 是否在屏幕上显示控件

2. autoplay 自动播放

3. preload(none/metadata/auto)预加载, 规定是否在页面加载后载入音频

   • none不需要加载数据
   • metadata元数据 诸如时长, 比特率, 帧大小这样的原数据而不是媒体内容需要加载的
   • auto浏览器应当加载它认为适量的媒体内容

   <audio src="xxx.mp3" autoplay controls preload="auto"></audio>
   

4. loop是否循环播放音/视频

   <audio src="xxx.mp3" autoplay controls loop preload="auto"></audio>
   

5. poster(video独有) 初始的效果

   <!-- 当视频不可用时, 使用一张图片替代, 否则是空白 -->
   <video src="xxx.mp4" poster="封面.jpg"controls></video>
   

   多类型资源

   <audio id="music">
   <source src="xxx.mp3"type="audio/mpeg">
   <source src="xxx.ogg" type="audio/ogg">
   </audio>
   

脚本化

var audio=document.getElementByld('audio');
// video不行 没有构造函数
var audio = new Audio('./laojie.mp3');
var audio=document.createElement('video');

// play()播放, pause()暂停, load()重新加载音视频, 用于更改来源或其他设置后对音视频元素进行更新

音量volume属性

表示播放音量, 介于0 (静音) ~ 1 (最大音量) 之间, 默认1, 将muted属性设置为true则会进入静音模式, 设置为false则会恢复之前指定的音量继续播放, 超过范围会报错[0, 1]

播放速率playbackRate

用于指定媒体播放的速度, 该属性值为1.0表示正常速度, 大于1则表示"快进', 0~1之间表示"慢放, 负值表示回放 每个浏览器实现的会有差别, 具体看浏览器实现

currentTime/duration属性

currentTime 设置或返回音频/视屏播放的当前位置, duration 返回当前音视频的时长, 单位秒

played/buffered/seekable

played属性返回已经播放 (看过) 的时间段, buffered属性返回当前已经缓冲的时间段, seekable属性则返回用户可以跳转的时间段, 这三个属性都是TimeRanges对象, 每个对象都有一个length属性以及start()和end()方法, length属表示当前的一个时间段, start()与end()分别返回当前时间段的起始时间点和结束时间点 (单位是秒, 起始参数是0)

paused/seeking/ended

这三个属性用来查询媒体播放状态, paused为true表示播放器暂停, seeking为true, 表示播放器正在调到一个新的放点, 如果播放器播放完媒体并且停下来, 则ended属性为true.

requestAnimationFrame 设置关键帧动画

1. 页面刷新前执行一次

2. 1000mS 60fps一>16ms

3. cancelAnimationFrame

4. 用法和setTimeout类似

5. 兼容性

   window.requestAnimFrame = (function () {
     return window.requestAnimationFrame ||
     window.webkitRequestAnimationFrame||
     window.mozRequestAnimationFrame ||
     function (callback) {
       window.setTimeout(callback, 1000 / 60)
     }
   })
   

requestAnimationFrame(f)
cancelAnimationFrame(id)

客户端存储

1. storage: 不会传到服务器
2. cookie

TIPS

cookie存储量小, 大约4k, localstorage 和 sessionStorage 大约5M

storage

• localStroage 永久性存储, 除非手动删除, 文档源限制
• sessionStorage 临时存储, 窗口关闭就没了, 文档源限制+窗口

// 存储方式
localStorage.name = 'xxx'
localStorage.info = JSON.stringify({name: 'xxx', company: 'xxx'})
// 读取方式
localStrorage.name
JSON.parse(localStorage.info)

1. sessionStorage.setltem(name,val)设置属性值
2. sessionStorage.getltem(name)获得属性值
3. sessionStorage.removeltem(name)移除属性
4. sessionStorage.clear()清除属性

cookie

存储信息到用户的设备上, 数据量较小4k

navigator.cookieEnabIed: 检测是否启用了cookie

1. 设置cookie值,

   document.cookie = 'name=xxx', (每次只能设置一个值, 因为浏览器会认为后面的键值对是这个cookie的属性)

2. 获得cookie值,

   document.cookie, 不建议出现分号, 逗号, 空格的奇怪的符号, encodeURIComponent()中文转码, decodeURIComponent(),

3. 设置cookie存储期限

   // 单位秒
   document.cookie = "name=scott;max-age=1000";
   // expires当前时间加上保存时间
   var timestamp=(newDate()).getTime()+10000;
   var expires=newDate(timestamp).toGMTString();
   document.cookie = "name=scott;expires= "+expires;
   // domain
   // path
   // 删除cookie max-age=0 需要带上键值对
   document.cookie = 'name=scott;max-age=0'
   // expires设置为之前的时间
   document.cookie = 'name=scott;expires=...';
   

Cookie, localStorage, sessionStorage比较

History对象方法

1. history.back()
2. history.forward()
3. history.go(n)

HTML5中新增的方法

通过修改 hash 和 hashchange 事件来实现历史纪录管理

• pushState

  history.pushState(state,title,url);添加一条历史记录

• replaceState

  history.replaceState(state,title,url);替换当前的历史记录

参数:

• state:一个与指定网址相关的状态对象, popstate事件触发时, 该对象会传入回调函数中, 如果不需要这个对象, 此处可以填null
• title:新页面的标题, 但是所有浏览器目前都忽略这个值, 因此这里可以填null
• url:新的网址, 必须与当前页面处在同一个域, 浏览器的地址栏将显示这个网址

History上新增的事件

• popstate事件

  历史记录发生改变时触发 调用history.pushState()或者history.replaceState()不会触发popstate事件

• hashchange事件

  当页面的hash值改变的时候触发, 常用于构建单页面应用

Worker是一种异步执行js的方式

var worker=new Worker('worker.js');

worker文件必须和主文件满足同源策略

• postMessage(n) 方法
• message事件

结束worker: close()在worker作用域中调用(worker.js) terminate()在worker对象上调用 (主进程的worker对象上worker.trminte)

fileReader方法

• abort()终止读取
• readAsBinaryString(file)将文件读取为二进制编码
• readAsDataURL(file)将文件读取为DataURL编码
• readAsText(file,[encoding])将文件读取为文本
• readAsArrayBuffer(file)将文件读取为arraybuffer

通过不同的方式读取文件

• fileReader读取文件事件
• onloadstart读取开始时触发
• onprogress读取中
• onldoadend读取完成触发, 无论成功或失败
• onload文件读取成功完成时触发
• onabort中断时触发
• onerror出错时触发
• file分割文件方法slice: File.slice(起始字节,终止字节)

Websocket

Websocket是一种网络协议, 是在HTTP基础上做了一些些优化的协议, 与HTTP无直接关系

HTTP协议有一个缺陷:

• 通信只能由客户端发起
• 服务器端不能实时发送最新数据给客户端,
• 我偏要最新的数据怎么办? Ajax轮询

报文头字段含义

• Connection必须设置Upgrade,表示客户端希望连接升级
• Upgrade字段必须设置Websocket表示希望升级到Websocket协议
• Sec-WebSocket-Key是随机的字符串, 服务器端会用这些数据来构造出一个SHA-I的信息摘要, 把"Sec-WebSocket-Key"加上一个特殊字符串"258EAFA5-E914-47DA-95CA-C5ABODC85B11", 然后计算SHA-1摘要, 之后进行BASE-64编码, 将结果做为"Sec+WebSocket-Accept"头的值, 返回给客户端, 如此操作, 可以尽量避免普通HTTP请求被误认为WebSocket协议
• Sec-WebSocket-Version表示支持的Websocket版本, RFC6455要求使用的版本是13, 之前草案的版本均应当弃用
• Sec-WebSocket-Protocal是一个用户定义的字符串, 用来区分同URL下, 不同的服务所需要的协议
• Origin字段是可选的, 通常用来表示在浏览器中发起此Websocket连接所在的页面, 类似于Referer但是, 与Referer不同的是, Origin只包含了协议和主机名称
• 其他一些定义在HTTP协议中的字段, 如Cookie等, 也可以在Websocket中使用

Websocket特点

1. 建立在TCP协议之上, 服务器端的实现比较容易
2. 与HTTP协议有着良好的兼容性, 默认端囗也是80和443, 并且握手阶段采用HTTP协议, 因此握手时不容易屏蔽, 能通过各种HTTP代理服务器
3. 数据格式比较轻量, 性能开销小, 通信高效
4. 可以发送文本, 也可以发送二进制数据
5. 没有同源限制, 客户端可以与任意服务器通信
6. 协议标识符为ws (如果加密为wss) 服务器网址就是url
7. 不受同源策略的限制

// 创建websocket
var Socket= new WebSocket(url);
// 方法使用连接传输数据
Socket.send(data)
// 方法用于终止任何现有许接
Socket.close()
// 事件
// open    Socket.onopen建立socket连接时触发这个事件
// message    Socket.onmessage客户端从服务器接收数据时触发
// error    Socket.onerror连接发生错误时触发
// close    Socket.onclose连接被关闭时触发

geolocation

window.navigator.geolocation

1. getCurrentPosition() 获取当前的位置信息
2. watchPosition() 监视位置变化, 和1参数一样
3. clearWatch() 清除位置监视

getCurrentPosition(s, e, p)

success回调 (必须)

error回调

options参数, 需要翻墙, chrome需要连接vpn

var success = function (pos){
  console.log(pos);
}
// 只传一个参数
window.navigatoc.geolocation.getCurrentPosition(success);

// devicemotion监听加速度变化
window.addEventListener('devicemotion', function(event) {
  console.log(event);
}

// deviceorientation监听设备在方向上的变化
window.addEventListener(deviceorientation, function(event) {
  console.log(event);
}

事件源对象属性

1. alpha表示设备沿z轴上的旋转角度, 范围为0-360正北0
2. beta表示设备在x轴上的旋转角度, 范围为-180~180, 它描述的是设备由前向后旋转的情况
3. gamma表示设备在y轴上的旋转角度, 范围为-90~90, 它庙述的是设备由左向右旋转的情况
4. webkitCompassHeading: 与正北方向的角度差值, 正北为0度, 正东为90度, 正南为180度, 正西为270度, 因为0度是正北, 所以叫指北针, ios特有
5. webkitCompassAccuragy:指北针的精确度, 表示偏差为正负多少度, 一般是10