html api图片形状大小,Html API总结

简单梳理HTML5中常见的API

1. dataset 自定义属性集合

可以为标签添加自定义属性，这些属性使用"data-"作为前置，随后这些属性就会被保存到dom对象的dataset属性中。该属性是DOMStringMap类型的键值对。可以像访问普通对象一样对其进行访问。

hello

var one = document.getElementById('one');

//访问dataset集合

console.log(one.dataset);

//遍历dataset集合

for(var key in one.dataset){

var val = one.dataset[key];

console.log(key,val);

}

2. video/audio

video元素用于播放视频或电影。使用这个元素就无需使用其他任意的插件，只需要使用支持HTML5的浏览器即可。audio元素用于播放音乐。

使用方法：

设置属性：

width:视频的宽度，以像素为单位

height:视频的高度，以像素为单位

src: 视频的地址

controls:控制条

autoplay:设置自动播放

poster: 当视频不可用时，向用户展示一副替代用的图片

loop: 是否循环

defaultPlaybackRate:默认播放速率

playbackRate:当前播放速率

volume:音量，取值为0~1

muted:是否处于静音状态

type:媒体类型

只读属性

currentSrc :读取播放中的媒体数据的URL地址

readyState : 准备状态

0 没有获取到媒体的任何信息

1 获取媒体数据无效，无法播放

2 当前帧已获得，但还未获取到下一帧数据

3 当前帧已获得，也获取到下一帧数据

4 当前帧已获得，也获取到了让播放器前进的数据

currentTime(可读写)/duration:

当前播放位置、总的播放时间

played、paused、ended

已经播放的时间段、是否暂停、是否播放完毕

方法

play()、

pause()、

load()、

canPlayType()

事件

loadstart 浏览器开始在网上寻找媒体数据

progress 浏览器正在获取媒体数据

suspend 浏览器暂停获取媒体数据

abort 浏览器在下载完全部媒体数据之前中止获取媒体数据，非错误引起

error 获取媒体数据过程中出错

emptied 所在网络变未初始化状态

stalled 浏览器舱室获取媒体数据失败

play 即将开始播放

paused 播放暂停

loadedmetadata 浏览器已经获取完毕媒体时间长和字节数

loadeddata 浏览器已加载完毕当前播放位置的媒体数据，准备播放

waiting 播放过程中由于得不到下一帧而停止播放

playing 正在播放

canplay 正在播放，并且以当前播放速率能够将媒体播放完毕，需缓存

canplaythrough 浏览器可以播放媒体，并且以当前播放速率能够将媒体播放完毕，无需缓存

seeking 请求数据，seeking属性为true

seeked 停止请求数据，seeking属性为false

timeupdate 当前播放位置改变

ended 播放结束

ratechange 播放速率改变

durationchange 播放时长改变

volumechange 音量改变

3. canvas 画布

canvas专门用来绘制图形，在页面中放置一个canvas元素，相当于在页面上放置了一块"画布"，可以在其中进行图形的描绘

3.1 绘制矩形

要想在画布中绘制一个矩形，需要执行以下操作：1.添加canvas元素；2.获取canvas对象；3.取得上下文；4.设定绘图样式；5.绘制

// 2. 获取画布对象

var canvas = document.getElementById('canvas');

// 3. 获取画布上下文环境

var context = canvas.getContext('2d');

// 4. 设置绘图样式

context.strokeStyle = "#dddddd";

context.fillStyle = "#ededed";

// 5. 进行绘制

context.fillRect(0,0,100,100);

context.strokeRect(0,0,110,110);

// 擦除矩形

context.clearRect(0,0,50,50);

3.2 绘制圆形

要想绘制其他图形，需要使用路径。

// 2. 获取画布对象

var canvas = document.getElementById('canvas');

// 3. 获取画布上下文环境

var context = canvas.getContext('2d');

// 4. 设置绘图样式

context.strokeStyle = "#dddddd";

context.fillStyle = "#ededed";

context.lineWidth= 3;

// 5. 圆形绘制

context.beginPath();

context.arc(200,200,50,0,Math.PI*2,true);

context.closePath();

context.stroke();

3.3 绘制渐变图形

var g = context.createLinearGradient(xStart,yStart,xEnd,yEnd);

线性渐变

(xStart,yStart)渐变起始点

(xEnd,yEnd)渐变结束点

var g = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

g.addColorStop(offset,color)

offset为所设定的颜色离开渐变起始点的偏移量(0~1)

color为绘制时使用的颜色

// 1.画布对象

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

// 2. 创建渐变对象

var g = context.createLinearGradient(0,0,100,100);

// 3. 由于是渐变，需要添加两个颜色

g.addColorStop(0.5,'rgb(255,255,0)');

g.addColorStop(1,'rgb(0,255,255)');

context.strokeStyle = "#dddddd";

// 4. 指定填充色为渐变色

context.fillStyle = g;

// 5. 绘制矩形

context.fillRect(0,0,100,100);

context.strokeRect(0,0,110,110);

context.clearRect(0,0,50,50);

3.4 绘制变形图形

平移

context.translate(x,y);

扩大

context.scale(x,y);

旋转

context.rotate(angle);

3.5 API

fillReact(x,y,width,height)

填充矩形

strokeRect(x,y,width,height);

绘制矩形边框

arc(x,y,radius,startAngle,endAngle,anticlockwise)

绘制圆路径

startAngle 开始角度

endAngle 结束角度

anticlockwise 是否按顺时针方向绘制

moveTo(x,y)

设置原点

lineTo(x,y)

设置终点

4. Web Storage

有时候我们需要在浏览器中暂时的保存一些信息，例如，登录后的用户信息。这时候可以使用sessionStorage,localStorage

4.1 sessionStorage

会话存储，也就是数据维持到一次会话中，即用户打开浏览器访问该网页到用户关闭浏览器。换句话说就是用户浏览这个网站所花费的时间

sessionStorage.setItem(key,val);

设置值

sessionStorage.getItem(key);

获取值

sessionStorage.removeItem(key);

移除值

sessionStorage.clear();

清空

4.2 localStorage

本地存储，数据会保存到浏览器中，及时浏览器关闭，数据依旧存在

localStorage.setItem(key,val);

设置值

localStorage.getItem(key);

获取值

localStorage.removeItem(key);

移除值

localStorage.clear();

清空