HTML5之API总结(2)_H5之家 - 中国HTML5教程资源分享第一站

createImageData( width, height ) 、createImageData(imageData) 绘制ImageData对象

getImageData( x, y, width, height ) 返回ImageData对象，该对象为画布上指定的矩形复制像素数据。

putImageData( ImageData, x, y ) 、putImageData( imageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ) 把图像数据放回画布上。

width 返回ImageData对象的宽度

height 返回 ImageData 对象的高度

data 返回一个对象，包含指定的ImageData对象的图像数据

globalAlpha 设置或返回绘图的当前alpha或透明度

globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上。

scale( x, y ) 缩放当前绘图

translate( x, y ) 重新设置画布上的(0,0)位置

rotate( angle ) 选择当前绘图，单位为“弧度”，角度转弧度公式（ degrees*Math.PI/180）

transform( m11, m12, m21, m22, dx, dy ) 替换绘图的当前转换矩阵

setTransform() 将当前转换重置为单元矩阵，然后运行transform()

save() 保存当前环境的状态

restore() 恢复之前保存过的路径状态和属性

getContext('2d') 获取 2d 对象

toDataURL() 将canvas转换成图片，返回地址

canvas常用总结

标签 <canvas>

不支持 canvas 的浏览器可以看到的内容

<canvas> 绘制环境

getContext("2d") ;目前支持 2d 的场景

绘制矩形

rect(L,T,W,H) :创建一个矩形

fillRect(L,T,W,H) :绘制填充的矩形

strokeRect(L,T,W,H) 绘制矩形(无填充)

默认一像素黑色边框

设置绘图

fillStyle :填充颜色(绘制 canvas 是有顺序的)

lineWidth :线宽度，笔迹粗细

strokeStyle :边线颜色

绘制路径

stroke ：绘制，划线(黑色默认)

fill :填充(黑色默认)

rect(矩形区域)

clearRect 擦除一个矩形区域

save 进入到XXX（高逼格）状态

restore 退出xxx（高逼格）状态

绘制圆形

arc(x,y,半径,起始弧度,结束弧度,旋转方向)

x ， y 起始位置

弧度与角度：弧度=角度 x π / 180

旋转方向：顺时针（默认： false ），逆时针（ true ）

绘制字体

font ：设置字体大小

fillText ：填充字体

strokeText ：绘制字体

二、视频音频

视频音频格式的简单介绍

常见的视频格式

视频的组成部分：画面、音频、编码格式

视频编码：H.264、Theora、VP8(google开源)

常见的音频格式

视频编码：ACC、MP3、Vorbis

HTML5 能在完全脱离插件的情况下播放音视频,但是不是所有格式都支持。

支持的视频格式：

Ogg= 带有 Theora 视频编码 +Vorbis 音频编码的 Ogg 文件

MEPG4= 带有H.264视频编码 +AAC 音频编码的 MPEG4 文件

WebM= 带有 VP8 视频编码 +Vorbis 音频编码的 WebM 格式

Video 的使用

单独用法

带提示用法

< videosrc="文件地址"controls="controls"> 您的浏览器暂不支持video标签。播放视频 </ video>

兼容用法

< videocontrols="controls"width="300"> <sourcesrc="move.ogg"type="video/ogg"> <sourcesrc="move.mp4"type="video/mp4"> 您的浏览器暂不支持video标签。播放视频 </ video>

Video 的常见属性

属性值描述

Autoplay Autoplay 视频就绪自动播放

controls controls 向用户显示播放控件

Width Pixels(像素) 设置播放器宽度

Height Pixels(像素) 设置播放器高度

Loop Loop 播放完是否继续播放该视频，循环播放

Preload load{auto,meta,none} 规定是否预加载视频。

Src url 视频url地址

Poster Imgurl 加载等待的画面图片

Autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效

Video 的 API 方法

方法属性事件

play() currentSrc play

pause() currentTime pause

load() videoWidth progress

canPlayType() videoHeight error

三、地理信息与本地存储地理位置

经度 : 南北极的连接线

纬度 : 东西连接的线

位置信息从何而来

IP 地址

GPS 全球定位系统

Wi-Fi 无线网络

基站

avigator.geolocation

单次定位请求： getCurrentPosition (请求成功,请求失败,数据收集方式)

请求成功函数

经度 : coords.longitude

纬度 : coords.latitude

准确度 : coords.accuracy

海拔 : coords.altitude

海拔准确度 : coords.altitudeAcuracy

行进方向 : coords.heading

地面速度 : coords.speed

请求的时间: new Date(position.timestamp)

请求失败函数

失败编号： code

3 : 设置了 timeout 值，获取位置超时了