html5笔记

01canvas基本使用

标签

您的浏览器不支持Cancas

绘图上下文对象
var canvas = document.getElementById('canvas');
var ctx=canvas.getContext('2d');

02canvas动画与其他操作

绘制圆形或圆弧:arc(x,y,r,sAngle,eAngle,ccw)
绘制曲线:quadraticCurveTo(cx,cy,x,y)
文本处理
常用属性:font属性,textAlign属性
常用方法:fillText(text,x,y,maxWidth),strokeText(text,x,y,maxWidth)
绘制图像
方法:
drawImage(img,x,y) 绘制图像
drawImage(img,x,y,width,height) 指定高度宽度
drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 截取图像一部分
示例:
var img=new Image();
img.src="test.png";
context.drawImage(img,10,20,200,100)
动画处理的时间控制
setInterval()和setTimeout()
requestAnimationFrame()

03音频和视频 IE9+

04综合应用canvas和video

坐标系统操作
translate(x,y) 坐标系统平移
rotate(angle) 坐标系统旋转
canvas状态的保存与恢复
save() 保存当前Canvas状态
restore() 将canvas状态恢复到之前保存的状态

05地理位置服务

Geolocation API简介
作用:用于定位用户的位置 IE9+
关于地理位置信息
1、Geolocation返回的位置信息:十进制格式的经纬度坐标
2、地理位置信息的来源:IP地址、GPS、WIFI、手机ID、自定义位置
Geoloacation 定位请求函数
单次定位请求

重复性位置更新请求

06网页存储

Web Storage API 简介
作用: 用于将数据存储在浏览器中 IE8+
与cookie的区别
cookie容量小,会自动进行网络传输 4k
web storage容量大,不会自动进行网络传输 5M
两种存储方式
localStorage:用于持久化的本地存储
sessionStorage:用于存储一次会话的数据
Web Storage 的数据以”键值对“的方式存储

07构建离线应用一般步骤

1、为元素定义manifest属性值
2、定义manifest文件(放在服务器端)
3、定义相关的JavaScript代码

缓存清单文件(manifest文件)
定义:
1、文件后缀名:.appcache、.manifest等
2、内容:分区块,每行定义一个资源文件名
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
3、注释:#开头的行

applicationCache.status
0 UNCACHED 未缓存
1 IDLE    空闲
2 CHECKING 检查中
3 DOWNLOADING 下载中
4 UPDATEREADY 更新就绪
5 OBSOLETE 过期

applicationCache.update()
作用:请求浏览器更新缓存
注意:1、当manifest文件修改时,才会下载必要的新资源
2、如果没有缓存或者缓存已经过期,则会抛出错误

你可能感兴趣的:(html5笔记)