HTML5之API总结

# 一、Canvas API

canvas API是H5标准中最复杂的部分， 它提供几种属性和方法，可以在canvas元素上创建图形应用

# 方法

以下方法专门用于调用canvas API

• getContext(context)创建可绘制图形的画布上下文，接受两个值，2d和3d

• fillRect(x,y,width,height) 绘制实心矩形

• strokeRect(x,y,width,height)绘制矩形轮廓

• clearRect(x,y,width,height)清除画布指定区域内容

• createLinearGradient(x1,y1,x2,y2)创建一个线性渐变效果

• createRadialGradient(x1,y1,r1,x2,y2,r2)创建一个放射渐变效果

• addColorStop(position,color)用于声明渐变颜色 position范围是0.0-1.0 用于确定颜色开始变化位置

• beginPath() 开始一条新路径

• closePath()在路径最后实现封闭该路径，它会生成一条直线，连接笔触的最后一个位置与路径的起点。如想要保持路径开放，使用fill()绘图，不用这个方法

• stroke() 用于创建路径轮廓

• fill()用于绘制实心形状

• clip()用于创建一个由路径定义的裁剪区域，只有在落入形状内的内容才绘制到画布上

• moveTo(x,y)将虚拟笔触移到新位置，下一个方法会从改点的开始继续设置路径

• lineTo(x,y)在新路径上添加一条直线

• rect(x,y,width,height)在路径为(x,y)位置上添加width和height矩形

• arc(x,y,radius,startAngle,endAngle,direction)在路径上添加一条弧线 ,x,y指定弧线的中心，角度单位为弧度，direction是一个表示顺时针或逆时针的布尔值。使用公式 Math.PI/180x角度，将角度转换为半径

• strokeText(text,x,y,max) 直接在画布上绘制文字轮廓。可选参数，max声明文字最大尺寸

• fillText(text,x,y,max)直接在画布上绘制实心文字。可选参数，max声明文字最大尺寸

• translate(x,y) 将画布原点移到点(x,y)处，原点（0,0）初始位置位于canvas所在区域的左上角

• rorate(angle) 这个方法可以使画布原点为中心发生旋转，角度必须是弧度。使用公式 Math.PI/180x 将角度转换为弧度

• scale(x,y) 改变画布比例 默认值是（1.0,1.0）这些值可以是负值

• transform（m1,m2,m3,m4,dx,dy）修改画布的转换矩阵。新矩阵是基于之前的矩阵得到的

• setTransform（m1,m2,m3,m4,dx,dy）修改画布的转换矩阵。重置之前的值，声明新的值

• save()保存画布状态，包括转换矩阵、样式属性、裁剪遮罩

• restore() 恢复上一次保存的状态

• drawImage() 在画布上绘制图像

# 属性

canvas API专用属性列表

• rect( x, y, width, height ) 绘制矩形

• fillRect( x, y, width, height ) 绘制被填充的矩形

• strokeRect( x, y, width, height ) 绘制矩形（无填充）

• clearRect( x, y, width, height ) 清除指定的矩形内的像素

• fill() 填充当前绘图（路径）

• stroke() 绘制已定义的路径

• beginPath() 起始（重置）当前路径

• moveTo( x, y ) 将笔触移动到指定的坐标(x,y)

• lineTo( x, y ) 绘制一条从当前位置到指定的坐标(x,y)的直线

• clip() 从原始画布剪切任意形状和尺寸的区域

• quadraticCurveTo() 创建二次贝塞尔曲线

• bezierCurveTo() 创建三次贝塞尔曲线

• arc( x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆或圆弧

• arcTo( x1, y1, x2, y2, radius) 根据给定点画圆弧，再以直线连接两个点

• isPointInPath( x, y ) 检测指定的点是否在当前路径中，在则返回true。

• fillStyle 设置或返回用于填充绘画的颜色、渐变或模式

• strokeStyle 设置或返回用于笔触的颜色、渐变或模式

• shadowColor 设置或返回用于阴影的颜色

• shadowBlur 设置或返回用于阴影的模糊级别

• shadowOffsetX 设置或返回阴影与形状的水平距离

• shadowOffsetY 设置或返回阴影与形状的垂直距离

• lineCap 设置或返回线条的结束点样式（butt、round、square）

• lineJoin 设置或返回当两条线交汇时，边角的类型（bevel、round、miter）

• lineWidth 设置或返回当前的线条宽度

• miterLimit 设置或返回最大斜接长度

• createLinearGradient( x0, y0, x1, y1 ) 创建线性渐变

• createPattern( image/canvas/video, repeat ) 在指定的方向内重复绘制指定的元素

• createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变

• addColorStop( stop, color ) 规定渐变对象中的颜色和停止位置

• font 设置或返回文本内容的当前字体属性（和css的font一样）

• textAlign 设置或返回文本内容的当前对齐方式

• textBaseline 设置或返回在绘制文本时使用的当前文本基线

• fillText( text, x, y ) 在画布上绘制“被填充”的文本

• strokeText( text, x, y ) 在画布上绘制文本（无填充）

• measureText( text ) 返回包含指定文本宽度的对象（属性width获取宽度）

• drawImage( image/canvas, x, y )、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )` 在画布上绘制图像、画布或视频

• 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的使用

• 单独用法
  • <video src="文件地址" controls="controls"></video>
• 带提示用法

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

• 兼容用法

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

• Video的常见属性

• Video的API方法

# 三、地理信息与本地存储

# 地理位置

# 本地存储

# 四、HTML5拖拽