HTML5核心知识总结

HTML5核心常用知识总结

一、canvas（画布）绘制详细说明

1.1canvas的基本用法

1.什么是canvas？
canvas是HTML5新增的元素，可通过JavaScript中的脚本来绘制图形，创建动画。使用canvas标签时，要成对出现；canvas元素默认具有高和宽，width：300px，height：150px。

2.替换内容
canvas在ie9之前的ie浏览器中不支持，要在该浏览器上给用户展示替代内容，我们只需要在canvas标签中提供替换内容就可以了。支持canvas的浏览器会忽略在容器中包含的内容，并且只是正常渲染canvas；不支持canvas的浏览器将会展示代替内容。

3.canvas标签的两个属性
canvas标签只有width和height两个属性，这些都是可选的。当没有设置宽度和高度的时候，canvas会初始化宽度为300px，高度为150px。

画布的高度和宽度：html属性设置width、height时只影响画布本身不影响画布内容；css属性设置width、height时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）

4.渲染上下文
canvas元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要找到它的渲染上下文。canvas元素有一个叫做getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文格式

获取方式
  var canvas = document.getElementById();
  var ctx = canvas.getContext("2d");

   检查支持性
     var canvas = document.getElementById();
            if(canvas.getContext){
                     var ctx = canvas.getContext("2d");
              }

1.2canvas绘制矩形

1.canvas提供了三种方法绘制矩形
①绘制一个填充的矩形（填充颜色默认为黑色）fillRect(x,y,width,height)
②绘制一个矩形的边框（默认边框为：1像素实心黑色）strokeRect(x,y,width,height)
③清除指定矩形区域，让清除部分完全透明 clearRect(x,y,width,height)

x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width、height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

2.strokeRect时，边框像素渲染问题
canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
context.strokeRect(10,10,50,50) 边框渲染在10.5到9.5之间，浏览器是不会让一个像素只用自己的一般的，相当于边框会在渲染9-11之间。
context.strokeRect(10.5,10.5,50,50) 边框会渲染10-11之间。

3.添加样式和颜色
fillStyle 设置图形的填充颜色
strokeStyle 设置圆形轮廓的颜色，默认情况下，线条和填充颜色都是黑色
lineWidth 这个属性设置当前绘线的粗细，属性值必须为正数（默认值是1.0）

4.lineJoin
设定线条与线条间合处的样式（默认是miter）
round 圆角
bevel 斜角
miter 直角

1.3canvas绘制路径

1.步骤：
①首先需要创建路径的起点
②使用画图命令画出路径
③将路径封闭
④路径生成后，通过描边或填充路径区域来渲染图形

2.常用方法
①beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。

②生成的路径第一部叫做beginPath() 本质上，路径是由很多路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧等）构成图形。每次这个方法被调用之后，列表清空重置，然后就可以重新绘制新的图形。

③moveTo(x,y) 将笔移动到指定的坐标(x,y)上，当canvas初始化或者beginPath()调用后，通常使用moveTo() 设置起点。

④lineTo(x,y) 将笔移动到指定的坐标(x,y)上，当canvas初始化或者beginPath()调用后，通常使用moveTo() 设置起点。

⑤closePath() 闭合路径之后图形绘制命令又重新指向上下文中。闭合路径closePath()不是必需的，这个方法会绘制一条从当前点到开始点的直线来闭合图形，如果图形已经闭合，即当前为开始点，该函数什么也不做；当调用fill()函数时，所有没有闭合的形状都会自动闭合，所以不需要调用closePath()函数。但是调用stroke()时不会自动闭合

⑥stroke() 通过线条来绘制图形轮廓，不会自动调用closePath()

⑦fill() 通过填充路径的内容区域生成实心的图形，自动调用closePath()

⑧绘制矩形 rect(x,y,width,height) 绘制一个左上角坐标为(x,y)，宽高为width以及height的矩形，当该方法执行的时候，moveTo()方法自动设置坐标参数(0,0)，笔触会自动重置默认坐标

⑨lineCap 有3个可能的值（默认为butt）
butt 线段末端以方形结束
round 线段末端以圆形结束
square 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一般的矩形区域

⑩save()、restore()
save()是canvas 2D API 通过当前状态放入栈中，保存canvas全部状态的方法。
restore() 是canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将canvas恢复到最近保存的方法，如果没有保存状态，此方法不做任何改变

基本模板
1.路径容器
每次调用路径api时，都会往路径容器里做登记，调用beginPath时，清空整个路径容器。
2.样式容器
每次调用样式api时，都会往样式容器里的做登记，调用save时，将样式容器里的状态压入样式栈
，调用restore时候，将样式栈中的栈顶状态弹出到样式容器里进行覆盖。
3.样式栈
调用save时候，将样式容器里的状态压入样式栈，调用restore时，将样式栈的栈顶状态弹出到样式容器里进行覆盖。

1.4canvas绘制曲线

角度与弧度的js表达式：radians=(Math.PI/180) * degrees
1.acr(x,y,radius,startAngle,endAngle,anticlockwise) 画一个以（x，y）为圆心，radius为半径的圆弧（圆），从startAngle结束，按照anticlockwise给定的方向（默认为顺时针）生成。 （x,y）为绘制圆弧所在圆上的圆心坐标，radius为半径，startAngle以及endAngle参数用圆弧定义了开始以及结束的弧度。这些都是以x轴为基准；参数anticlockwise为一个布尔值。true：逆时针；false：顺时针。

2.arcTo(x1,y1,x2,y2,radius) 根据给定的控制点和半径画一段圆弧，肯定会从（x1,y1）经过，但不一定经过（x2,y2）,（x2,y2）只是控制一个方向.

3.二次贝塞尔 quadraticCurveTo(cp1x,cp1y,x,y) 绘制二次贝塞尔曲线。（cp1x,cp1y）为一个控制点，（x,y）为结束点，起始点由moveTo指定的点

3.三次贝塞尔 bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 绘制三次贝塞尔曲线。(cp1x,cp1y)为控制点一，（cp2x,cp2y）为控制点二，（x,y）为结束点。起始点为moveTo指定的点。

1.5canvas中的变换

1.translate(x,y) 用来移动canvas的原点到一个不同的位置。x表示左右偏移量，y表示上下偏移量。（在canvas中traslate是累加的）。

2.rotate(angle) angle表示旋转的角度，顺时针方向，以弧度为单位的值。旋转中心点始终是canvas的原点，如果要改变，需要用到translate方法。（在canvas中rotate是累加的）。

3.scale(x,y) 用该方法来放大、缩小图形在canvas中的像素数目，对形状，位图进行缩小或者放大。（在canvas中scale是累乘的）。

1.6canvas中使用图片

在canvas插入图片（需要image对象）
1.canvas操作图片时，必须等图片加载完才能操作
2.drawImage(image,x,y,width,height) 其中image是image或者canvas对象，（x，y）是在canvas里的起始坐标，这个方法多了两个参数：width、height，这两个参数用来控制当canvas画入时应该缩放的大小。

在canvas中设置背景（需要image对象）
createPatter(image,repetition)
image:图像源
repetition：repeat、repeat-x、repeat-y\no-repeat
一般情况下会将creatPattern返回的对象作为fillstyle的值。

渐变
canvas线性渐变，createLinearGradient(x1,y1,x2,y2), (x1,y1)表示渐变的起点, (x2，y2)表示渐变的终点。
gradient.addColorStop(position,color) , gradient:createLinearGradient的返回值。
position 必须是一个0.0与1.0之间的数值，表示渐变中颜色所在的相对位置；
color 必须是一个有效的css颜色值（如#fff,rgba(0,0,0,1)等）。

canvas径向渐变
createRadialGradient(x1,y1,r1,x2,y2,r2) 前三个参数定义另一个以（x1,y1）为原点，半径为r1的圆；后三个参数定义另一个以（x2,y2）为原点，半径为r2的圆。

1.7canvas绘制文本

canvas中提供了两种样式来绘制文本
1.fillText(text,x,y) 在指定的(x,y) 位置填充指定的文本
2.strokeText(text,x,y) 在指定的(x,y)位置绘制文本边框

文本样式
1.font = value ，默认字体时10px sanx-serif（在指定font属性时，大小和字体缺一不可）。
2.textAlign = value(value:left、right、center)
left:文本左对齐
right：文本右对齐
center：文本居中对齐（textAlign=“center”比较特殊，值为center时，文本的居中是基于在fillText时候所给的x的值，文本一半在x的左边，一半在x的右边）

3.textBaseLine = value（value：top、middle、bottom）（描述绘制文本时，当前文本基线的属性）
top：文本基线在文本块的顶部
middle：文本基线在文本块的中间
bottom：文本及现在文本的底部

4.measureText，该方法返回一个TextMetrics对象，包含关于文本尺寸的信息（例如文本宽度等。。。）

文本阴影
1.shadowOffsetX = float，shadowOffsetX 和shadowOffsetY 用来设定阴影在X和Y轴的延伸距离，默认都为0。

2.shadowOffsetY = float，shadowOffsetX 和shadowOffsetY 用来设定阴影在X和Y轴的延伸距离，默认都为0。

3.shadowBlur = float，shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为0。

4.shadowColor = color(必须项)，shadowColor 是标准的css颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

1.8像素操作

在canvas中的像素操作：直接通过ImageData对象操作像素数据，直接读取或将数据数组写入该对象中。

得到场景像素数据
getImageData() 获得一个包含画布场景像素数据的ImageData对象，它代表了画布区域的对象数据。

ctx.getImageData(sx,sy,sw,sh);
sx:被提取的图像矩形区域的左上角x坐标
sy:被提取的图像矩形区域的左上角y坐标
sw:被提取的图像矩形区域的宽度
sh:被提取的图像矩形区域的高度

mageData对象
ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:包含着rgba格式的整型数据，范围在0-255之间
r：0-255（黑色到白色）
g：0-255（黑色到白色）
b：0-255（黑色到白色）
a：0-255（透明到不透明）

在场景中写入像素数据
putImageData() 该方法是进行对像素数据的写入。
putImageData(myImageData,dx,dy) dx,dy参数表示希望在场景内左上角绘制的像素数据所得到的设备坐标。

创建一个ImageData对象
ctx.createImageData(width,height)
width:ImageData 新对象的宽度
height:ImageData 新对象的高度
创建出来的默认是透明的。

全局透明度
globalAlpha=value，这个属性影响到canvas里所有图形的透明度，有效的值范围是0.0（完全透明） - 1.0（完全不透明）默认是1.0。

覆盖合成
source:新的图像（源）
destination：已经绘制过的图形（目标）

        globalCompositeOperation
            source-over(默认值)：源在上面，新的图像层级比较高
            source-in：只留下源与目标的重叠部分
            source-out：只留下源超出目标的部分
            source-atop:去掉源溢出的部分

            destination-over:目标在上面，旧的图像层级比较高
            destination-in:只留下源与目标的重叠部分（目标的那一部分）
            destination-out:只留下目标超过源的部分
            destination-atop：去掉目标溢出的部分

导出图像
将画布导出为图像
toDataURL(时canvas元素接口上的方法)

事件操作
    ctx.isPointInPath(x,y) 判断当前路径中是否包含检测点
        x:检测点x坐标
        y:检测点y坐标
        该方法只作用域最新画出的canvas图像

二、音视频标签

2.1音视频标签的属性

width:视频显示区域的宽度
height：视频显示区域的高度
poster：一个海报帧的URL，用于用户播放或者跳帧之前展示
src：嵌入到页面的视频的url
controls：显示或隐藏用户控制界面
autoplay：媒体是否自动播放
loop：媒体是否循环播放
muted：媒体是否静音

preload：默认值，none：用户不需要查看该视频，浏览器对该视频不做缓存
metadata，抓取某些源数据
auto：该视频可以预先加载
空字符串：代之auto值

2.2音视频中js相关的属性

currentTime: 开始播放到现在所用的时间（可读写）
duration：媒体总时间（只读）
muted：是否静音（可读写，相比于volume优先级要搞）
volume：音量的相对值（0.0-1.0 可读写）
paused：媒体是否暂停（只读）
ended：媒体是否播放完毕（只读）
error：媒体发生错误的时候返回错误代码（只读）
currentSrc：以字符串的形式返回媒体地址（只读）

视频多的部分：
poster：视频播放前的预览图片（读写）
width、height：设置视频的尺寸（读写）
videoWidth、videoHeight：视频的实际尺寸（只读）

2.3音视频的相关函数

1.play() 媒体的播放
2.pause() 媒体的暂停
3.load() 重新加载媒体

三、H5表单

3.1表单新格式

input中的type属性值为：
1.email，email地址类型，当不符合email格式时，提交不会成功，会出现提示；在移动端获取焦点时会切换到英文键盘
2.tel，电话类型。在移动端获取焦点时，会切换到数字键盘
3.url，地址类型，当不符合url格式时，提交不会成功，会出现提示
4.search，搜索类型，清空文本的按钮
5.range，特定范围你的数值选择器，属性：min、max、step
6.number：只能包含数字的输入框
7.color：颜色选择器
8.datetime：显示完整日期（移动端浏览器支持）
9.datetime-local：显示完整日期，不含时区
10.time：显示时间，不含时区
11.date：显示日期
12.week：显示周
13.month：显示月

3.2表单新增属性

input中的属性值：
1.placeholder：输入框的提示信息
2.autofocus：指定表单获取输入的焦点
3.required：必填选项
4.pattern：正则验证，pattern="\d{1,9}"
5.formaction：在该属性值中可以确定一个新的提交地址

3.3表单验证

表单验证：
validity对象，通过下面的valid可以查看验证是否通过，如果验证通过则返回true，验证失败返回false
元素.addEventListener(“invalid”,function(){})

valueMissing:输入值为空时返回true
typeMismatch：控件值与预期类型不匹配返回true
patternMismatch：输入值不满足pattern正则返回true

tooLong：超过maxLength最大限制返回true
rangeUnderflow：验证的range最小值返回true
rangeOverflow：验证的range最大值返回true
stepMismatch：验证range的当前值是否符合min、max以及step的规则返回true

customError：不符合自定义验证返回true
setCustomValidity

关闭验证：formnovalidate属性。