HTML5核心知识总结

骑猪看日落 2022-12-07 15:21 266阅读 0赞

### 目录 ###

*  HTML5核心常用知识总结
 *   *  一、canvas（画布）绘制详细说明
     *   *  1.1canvas的基本用法
         *  1.2canvas绘制矩形
         *  1.3canvas绘制路径
         *  1.4canvas绘制曲线
         *  1.5canvas中的变换
         *  1.6canvas中使用图片
         *  1.7canvas绘制文本
         *  1.8像素操作
     *  二、音视频标签
     *   *  2.1音视频标签的属性
         *  2.2音视频中js相关的属性
         *  2.3音视频的相关函数
     *  三、H5表单
     *   *  3.1表单新格式
         *  3.2表单新增属性
         *  3.3表单验证

# 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属性。