HTML理论知识

一、弹性布局：

1.弹性盒

flex（弹性盒、伸缩盒）
是css中的有一种布局手段，主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

1.1.弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器，通过display来设置弹性容器

• display:flex 设置为块级弹性容器
• display:inline-flex 设置为行内的弹性容器

1.1.1.弹性容器的属性

1. flex-direction：指定容器中弹性元素的排列方式
   主轴： 弹性元素的排列方向称为主轴
   侧轴：与主轴垂直方向的称为侧轴
   可选值：

• row 默认值，弹性元素在容器中水平排列（左向右） -主轴 自左向右
• row-reverse ,弹性元素在容器中反向水平排列（右向左） -主轴 自右向左
• column 弹性元素纵向排列 （自上向下） -主轴 自上向下
• column-reverse ，弹性容器纵向排列（自下向上） -主轴 自下向上

2. flex-wrap：设置弹性元素在弹性容器中是否自动换行
   可选值：

• nowrap 默认值，元素不会自动换行
• wrap 元素沿着侧轴方向自动换行
• wrap-reverse 元素沿着侧轴反方向换行
• flex-flow: direction和wrap的简写属性：flex-flow:row wrap;

3. justify-content：如何分配主轴上的空白空间（主轴上元素如何排列）
   可选值：

• flex-start 元素沿着主轴起边排列
• flex-end 元素沿着主轴的终边排列
• center 元素居中排列
• space-around 空白分布到元素两侧
• space-between 空白均匀分布到元素间
• space-evenly 空白分布到元素的单侧

4. align-content 辅轴上的空白空间的分布
   可选值：

• flex-start 元素沿着主轴起边排列
• flex-end 元素沿着主轴的终边排列
• center 元素居中排列
• space-around 空白分布到元素两侧
• space-between 空白均匀分布到元素间
• space-evenly 空白分布到元素的单侧

5. align-items：元素在辅轴上如何对齐 -元素间的关系
   可选值：

• stretch 默认值，将元素的长度设置为相同的值
• flex-start 元素不会拉伸，沿着辅轴起边对齐
• flex-end 沿着辅轴终边对齐
• center 居中对齐
• baseline 基线对齐

1.2弹性元素

弹性容器的子元素是弹性元素（弹性项），一个元素可以同时是弹性容器和弹性元素

1.2.1.弹性元素的属性:

1. flex-grow 指定弹性元素的伸展的系数，当父元素有多余的空间时，子元素会按照比例进行分配

2. flex-shrink 指定弹性元素的收缩系数

3. flex-basis 指定的是元素在主轴的基础长度
   （如果主轴是横向的， 则该值指定的是主轴的宽度，如果主轴是纵向的， 则该值指定的是元素的高度，默认值是auto ，表示参考元素自身的高度和宽度，如果传递了一个具体的数值，则以该值为准。）

4. flex：可以设置弹性元素所有的三个样式

                 flex         增长    缩减     基础长度
                 initial     "flex:    0         1       auto"
                 auto        "flex:    1         1		  auto"
                 none 	      "flex:	0 		  0       auto"	弹性元素没有弹性
   

5. align-self:用来设置弹性元素上的align-items

6. order:决定弹性元素的排列顺序

二、像素：

屏幕是由一个一个发光的小点构成的，这一个一个小点就是像素

分辨率：1366 * 768 说的就是屏幕中小点的数量
在前端开发中像素分为两种情况讨论：css像素 和物理像素

• 物理像素 上述所说的小点点就属于物理像素

• css像素， 编写网页时，我们所用像素都是css像素

  浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现, 一个css像素最终由几个物理像素显示，由浏览器决定,默认情况下在pc端，一个css像素=一个物理像素

三、视口(viewport)

视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小，来观察css像素和物理像素的比值

• 默认情况下：
  视口宽度：1366px(css像素) 和1366px（物理像素），此时，css像素和物理像素的比是1：1。
• 放大两倍的情况：
  视口宽度：683px(css像素)和1366px(物理像素)，此时，css像素和物理像素的比是1：2。
  我们可以通过改变视口的大小。来改变css像素和物理像素的比值

1.移动端

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰，智能手机的像素点要远远小于计算机的像素点

      		  24寸  1920*1080
       iphone 4.7寸 750*1334

问题，一个宽度为900像素的网页在iPhone中如何显示?
默认情况下，移动端的网页都会将视口设置为980像素(css像素)，以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页进行缩放以完整显示网页， 所以基本上大多数的pc端网站都可以在移动端中正常浏览，但是往往不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网站。

2.移动端页面

设置视口大小 device-width表示设备的宽度（完美视口），移动端默认的视口大小是980px(css像素)， 默认情况下，移动端的像素比就是 980/移动端宽度 （980/750），如果我们直接在网页中编写移动端代码，像素比是非常不好的，会导致网页中的内容非常非常小，编写移动端页面时，必须要确保一个比较合理的像素比。
可以通过meta标签来设置视口大小，每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称为完美视口 ，将网页的视口设为完美视口。

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

结论，以后在写移动端的页面，就把上面这行代码先写上。

3.视口

 不同的设备完美视口的大小是不一样的
          iPhone6     --  375
          iphone6plus --  414         

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样的，比如在iPhone6中，375就是全屏，而到了plus中375中就会缺一块，所以在移动端开发时，就不能再使用px进行布局了。
vw表示的是视口的宽度（viewport width）， vw这个单位永远相对于视口宽度进行计算

      100vw = 一个视口的宽度
        1vw = 1%视口宽度
 设计图的宽度是      750px 1125px 
        设计图      750px
 使用vw作为单位      100vw
 创建一个48px*35px大小的元素
       100vw=750px(设计图的像素)  0.133333333vw=1px
       6.4vw=40px(设计图像素)
       4.667vw=35px(设计图像素)

4.vw适配

网页中字体大小最小是12px，不能设置一个比12像素还小的字体，如果我们设置了一个小于12px的字体，则字体自动设置为12px。

            0.13333333vw=1px
            5.333333vw=40px

4.rem

      	    1rem=1html字体的大小
            1rem=40px(设计图)

四、响应式布局

网页可以根据不同的设备窗口呈现出不同的效果,使用响应式布局，可以使一个网页适用于所有设备,响应布局的关键就是媒体查询。
通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式。

1.使用媒体查询

    语法：@media 查询规则{}
         媒体类型：
            	all所有设备
            	print 打印设备
            	screen 带屏幕的设备
            	speech 屏幕阅读器   

可以使用逗号连接多个媒体类型，这样他们之间就是一个或的关系，可以在媒体类型前添加一个only，表示只有，only的使用主要是为了兼容一些老版本浏览器

@media print,screen,speech{
      body{
          background-color:#bfa;
      }
 }

2.媒体特性：

• width 视口的宽度
• height 视口的高度
• min-width视口的最小宽度(视口宽度大于指定宽度时生效)
• max-width视口的最大宽度（视口宽度小于指定宽度时生效）

@media (max-width:500px){
      body{
           background-color: #bfa;
      }
 }

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化。
一般比较常用的断点结构：

• 小于768 超小屏幕 max-width=768px
• 大于768 小屏幕 min-width=768px
• 大于992 中型屏幕 min-width=992px
• 大于1200 大屏幕 min-width=1200px

@media only screen and (min-width:500px) and (max-width:700px){
         body{
             background-color: #bfa;
         }
 }

五、HTML5

1.attr&prop

attribute是html的预定义和自定义属性， property是js对象身上的直接属性。
attribute和property的同步关系？
非布尔值属性，实时同步布尔值属性
如果没有动过property，attribute会同步property，property不会同步attribute；
如果动过property，attribute不会同步property，property不会同步attribute。
浏览器认识及用户操作的是property。
jQuery中操作attr()及prop()。
总结：布尔值属性最好使用prop方法，非布尔值属性attr方法。
classList:相当于class的property(className)

     add
     remove
     toggle
     dataset:相当于自定义属性（限制data-x-y）的property

六、canvas

1.基本用法

• < canvas >是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形，例如，它可以用于绘制图形，创建动画，最早由apple引入webkit，我们可以使用< canvas >标签来定义一个canvas元素。
  —>使用< canvas >标签时，建议要成对出现，不要使用闭合的形式
  —>canvas元素默认具有高宽
  width:300px height:150px

• 替换内容

  < canvas >很容易定义一些替代内容，由于某些较老的浏览器（尤其ie9之前的IE浏览器），不支持HTML元素"canvas"，但在这些浏览器上你应该要给用户展示替代内容，我们只需要在< canvas >标签中提供替换内容就可以。
  ---->支持< canvas >的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
  ---->不支持< canvas>的浏览器会显示代替内容。

• canvas标签的两个属性
  canvas看起来和img元素很相像，唯一的不同就是它并没有src 和 alt 属性，实际上，< canvas>标签中有两个属性-——width和height，这些都是可选的，当没有设置高度和宽度的时候，canvas会初始化宽度为300px和高度为150px 。
  画布的宽度
  html属性设置width height时只影响画布本身不影响画布内容
  css属性设置width height时不但会影响画布本身高宽， 还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）

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

// 获取方法
var canvas = document.getElementById("box");
var ctx = canvas.getContext("2d");
// 检查支持性
var canvas = document.getElementById("tutorial");
if(canvas.getContext){
   var ctx = canvas.getContext("2d");
}

2.绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形，所有其他的图形的绘制都至少需要生成一条路径.
1. 绘制矩形

canvas提供了三种方法绘制矩形

• 绘制一个填充的矩形（填充色默认为黑色）: fillRect(x,y,width,height)
• 绘制一个矩形的边框（默认边框为：一像素是新黑色）: strokeRect(x,y,width,height)
• 清除指定矩形区域，让清除部分完全透明: clearRect(x,y,width,height)
  x与y指定了在canvas画布上所绘制的左上角（相对于原点）的坐标。width和height设置矩形的尺寸，（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

2.strokeRect时，边框像素渲染问题
按理渲染出的边框应该是1px的，canvas在渲染矩形边框时，边框宽度是平均分布在偏移位置的两侧，context.strokeRect(10,10,50,50), 边框会渲染在10.5和9.5之间,浏览器是不会让一个像素只用自己的一半的,相当于边框会渲染在9到11之间,context.strokeRect(10.5,10.5,50,50),边框会渲染在10到11之间
添加样式和颜色

      fillStyle  ：设置图形的填充颜色
    strokeStyle  : 设置图形轮廓的颜色
        		   默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)
      lineWidth  : 这个属性设置当前绘线的粗细，属性值必须为正数
        		   描述线段宽度的数字。0、负数、infinity 和 NaN 会被忽略
        		   默认值是1.0

3. lineWidth & 覆盖渲染

4. lineJoin:设定线条与线条间接含处的样式（默认是miter）

       round : 圆角
       bevel ：斜角
       miter ：直角
   

3.绘制路径

图形的基本元素是路径，路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

   **步骤:**
		1.首先，你需要创建路径起始点，
		2.然后你是用画图命令去画出路径
		3.之后你把路径封闭
		4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形

1. 绘制三角形

• beginPath()

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

• moveTo(x,y)

  当笔触移动到指定的坐标x以及y上,当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点.

• lineTo(x,y)

  绘制一条从当前位置到指定x以及y位置的直线。

• closePath()

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

• stroke()

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

• fill()

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

2. 绘制矩形

   rect(x,y,width,height)
   绘制一个左上角坐标为(x,y)，宽高为width和height的矩形，当该方法执行的时候，moveTo()方法自动设置坐标为(0,0),也就是说，当前笔触自动重置为默认坐标.

3. lineCap

   lineCap 是canvas 2D API 指定如何绘制每一条线段末端的属性，有3个可能的值，分别是：

   	butt   :  线段末端以方形结束，
   	round  :  线段末端以圆形结束，
   	square :  线段末端以方形结束，但是增加了一个宽度和线段相同，
   				高度是线段厚度一半的矩形区域
   	默认值是butt.
   

4. save

   save()是canvas 2D API 通过将当前状态放入栈中，保存canvas全部状态的方法, 保存到栈中的绘制状态有下面部分组成：
   当前的变换矩阵。
   当前的剪切区域。
   当前的虚线列表。
   以下属性当前的值：
   strokeStyle,
   fillStyle,
   lineWidth,
   lineCap,
   lineJoin…

5. restore

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

4.canvas(贝塞尔曲线)

1. 二次贝塞尔

   quadraticCurveTo(cplx,cply,x,y)
   绘制二次贝塞尔曲线，cplx,cply为一个控制点，x,y为结束点,起始点为moveTo到指定的点.

2. 三次贝塞尔

   bezierCurveTo(cplx,cply,cplx2,cply2,x,y)
   绘制三次贝塞尔曲线，cplx,cply为控制点一，cplx2,cply2，为控制点二，x,y为结束点。起始点为moveTo时指定的点.

5.绘制曲线

角度与弧度的js表达式：radians = (Math.PI/180)*degrees.
canvas绘制圆形
1.arc(x,y,radius,startAngle,endAngle,anticlockwise)
画一个以(x,y)为圆心的以radius为半径的圆弧（圆），从starAngle开始到endAngle结束， 按照anticlockwise给定的方向（默认为顺时针）来生成。
true：逆时针
false：顺时针
x,y为绘制圆弧所在圆上的圆心半径
radius为半径
startAngle以及endAngle参数用户都定义了开始以及结束的弧度，这些都是以x轴为基准,参数anticlockwise为一个布尔值，为true时，是逆时针方向，否则顺时针方向。
2.arcTo(x1,y1,x2,y2,radius)
根据给定的控制点和半径画一段圆弧,肯定会从(x1 y1) ，但不一定经过(x2 y2);(x2 y2)只是控制一个方向

6.变换

translate(x,y)
我们先介绍translate方法，它用来移动canvas的原点到一个不同的位置。translate方法接受两个参数，x是左右偏移量，y是上下偏移量在canvas中translate是累加的.
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是canvas的原点，如果要改变它，我们需要用到translate方法,在canvas中rotate是累加的.
scale(x,y)
scale方法接受两个参数。x,y分别是横轴和纵轴的缩放因子，他们都必须是正值。值比1.0小表示缩小，比1.0大表示放大，值为1.0表示什么效果都没有。缩放一般我们用来增减图形在canvas中的像素数目，对形状，位置进行缩小或放大。在canvas中scale是累称的.

7.使用图片，设置背景

1. canvas中插入图片（需要image对象）

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

2. 在canvas中设置背景（需要image对象）

      1.createPattern(image,repetition)
   	image：图像画
   	repitition:
       		"repeat"
       		"repeat-x"
      	    	"repeat-y"
       		"no-repeat"
   	一般情况下，我们都会将createPattern返回的对象作为fillStyle的值
   

3. 渐变

      canvas渐变（线性渐变）
           createLinearGradient(x1,y1,x2,y2)
           表示渐变的起点(x1,y1)与终点(x2,y2)
      canvas渐变（径向渐变）
   	    createRadialGradient(x1,y1,r1,x2,y2,r2)
       	前三个参数定义另一个以(x1,y1)为原点，半径为r1的值
       	后三个参数则定义另一个以(x2,y2)为原点，半径为r2的值
   	gradient.addColorStop(position,color)
       gradient.createLinearGradient的返回值
               addColorStop 方法接受两个参数
               position参数必须是一个0.0与1.0之间的数值，表示渐变中颜色所在的相对位置
                       例如，0.5表示颜色会出现在正中间。
               color 参数必须是一个有效的css颜色值（如#FFF , rgba(0,0,0,.1)等等）
   

8.绘制文本

1. canvas提供了两中方法来渲染文本：

      fillText(text,x,y)    在指定的(x,y)位置填充指定的文本
      strokeText(text,x,y)  在指定的(x,y)位置绘制文本边框
   

2. 文本样式

     font = value
       当前我们用来绘制文本的样式，这个字符串使用和css font 属性相同的语法。
       默认的字体是10px sans-serif
       **font属性在指定时，必须要有大小和字体，缺一不可**
     textAllign = value
       文本对齐选项，可选的值包括：left,right center
   	left       文本左对齐
   	right      文本右对齐
   	center     文本居中对齐
        这里的textAllign="center"比较特殊，textAllign的值为center时候
       	  文本的居中是基于你在fillText的时候所给的x值
       	  也就是说文本一半在x的左边，一般在x的右边
     textBaseline = value
   	描述绘制文本时，当前文本基线的属性。
    	  top      文本基线在文本块的顶部
   	  middle   文本基线在文本块的中间
   	  bottom   文本基线在文本块的底部
   

3. measureText

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

4. canvas中文本水平垂直居中

	    ctx.textbaseline = 'middle'
		ctx.font = '40px sans-serif'
		var w = ctx.measureText('xxx').width
		ctx.fillText('xxx',(canvas.width-w)/2,(canvas.height-40)/2)

5. 文本阴影

   	shadowOffsetX = float
   	shadowOffsetY = float
   		shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延伸距离
   	       它们都默认为0
   	shadowBlur = float
   		shadowBlur用来设定阴影的模糊程度，其数值并不跟像素数量挂钩，
   		也不受变换矩阵的影响，默认为0
   	shadowColor = color(必须项)
   		shadowColor是标准的css颜色值，用于设定阴影颜色效果，
   		默认是全透明的黑色
   

9.canvas像素操作

到目前为止，我们尚未深入了解canvas画布真实像素的原理，事实上，你可以直接通过ImageData对象操作像素数据，直接读取或将数据数组写入该对象中:

1. 得到场景像素数据

   	getImageData(): 获得一个包含画布场景像素数据的ImageData对象，
   					它代表了画布区域的对象数据
   	ctx.getImageData(sx,sy,sw,sh)
   		sx：将要被提取的图像数据矩形区域的左上角x坐标。
   		sy：将要被提取的图像数据矩形区域的左上角y坐标。
   		sw：将要被提取的图像数据矩形区域的宽度。
   		sx：将要被提取的图像数据矩形区域的高度。
   

2. ImageData

   	ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
   		width：图片宽度，单位是像素
   		height：图片高度，单位是像素
   		data：Uint8ClampedArray类型的一堆数组，
       		  包含着RGBA格式的整形数据，范围在0到255之间（包括255）
      	 		R:0---->255(黑色到白色)
       		G:0---->255(黑色到白色)
       		B:0---->255(黑色到白色)
       		A:0---->255(透明到不透明)
   

3. 在场景中写入像素数据

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

4. 创建一个ImageData对象

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

10.合成

1. 全局透明度的设置

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

2. 覆盖合成

     source：新的图像（源）
     destination：已经绘制过的图形（目标）
   	globalCompositeOperation
   	source-over（默认值）：源在上面，新的图像层级比较高
   	source-in ：只留下源与目标的重叠部分（源的那一部分）
   	source-out ：只留下源超过目标的部分
   	source-atop ： 砍掉源溢出的部分
   
   	destination-over : 目标在上面，旧的图像层级比较高
   	destination-in ：只留下源于目标的重叠部分（目标的那一部分）
   	destination-out ： 只留下目标超过源的部分
   	destination-atop : 只留下目标溢出的部分
   

11.其他

1. 将画布导出为图像

   toDataURL（注意是canvas元素接口上的方法）

2. 事件操作

   	ctx.isPointInPath(x,y)    判断在当前路径中是否包含检测点
       		x:检测点的X坐标
       		y:检测点的Y坐标
   	注意，此方法只作用于最新画出的canvas图像
   

12.总结

1. 注意点
   ①canvas图像的渲染有别于html图像的渲染，canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题,写canvas代码一定要具有同步思想,在获取上下文时，一定要先判断.
   ②画布高宽的问题:画布默认高宽300*150.切记一定要使用html的attribute的形式来定义画布的宽高,通过css形式定义会缩放画布内的图像.
   ③绘制矩形的问题:
   a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，一旦出现小数边框都会向上取整;
   b.canvas的api只支持一种图像的直接渲染：矩形;
   c.我们没法使用选择器来选到canvas中的图像.

2. 画布api

   oc.getContext("2d"):获取画布的2d上下文
   oc.width:画布在横向上css像素的个数
   oc.height:画布在纵向上css像素的个数
   oc.toDataUrl():拿到画布的图片地址
   

3. 上下文api

   ctx.fillRect(x,y,w,h):填充矩形
   ctx.strokeRect(x,ymwmh):带边框的矩形
   ctx.clearRect(0,0,oc.width,oc.height):清除整个画布,注意原点的位置
   ctx.fillStyle:填充颜色
   	背景fillStyle的值可以是createPattern(image, repetition)返回的对象
   	线性渐变fillStyle的值可以是createLinearGradient(x1, y1, x2, y2))返回的对象
   		addColorStop(position, color)
   	径向渐变fillStyle的值可以是createRadialGradient(x1, y1, r1, x2, y2, r2)返回的对象
   		addColorStop(position, color)
   ctx.strokeStyle:线条颜色
   ctx.lineWidth：线条宽度
   ctx.lineCap：线条两端的展现形式
   ctx.lineJoin：线条连接处的展现形式
   ctx.moveTo(x,y):将画笔抬起点到x，y处
   ctx.lineTo(x,y):将画笔移到x，y处
   ctx.rect(x,y,w,h)
   ctx.arc(x,y,r,degS,degE,dir)
   ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
   		结合moveTo(x,y)方法使用，
   		x,y:起始点
   		x1,y1：控制点
   		x2,y2：结束点
   ctx.quadraticCurveTo(x1,y1,x2,y2)
   		结合moveTo(x,y)方法使用，
   		x,y:起始点
   		x1,y1：控制点
   		x2,y2：结束点
   		必须经过起点和终点
   ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
   		结合moveTo(x,y)方法使用，
   		x,y:起始点
   		x1,y1：控制点
   		x2,y2：控制点
   		x3，y3：结束点
   		必须经过起点和终点
   ctx.fill()
   ctx.stroke()
   
   ctx.beginpath():清除路径容器
   ctx.closepath():闭合路径
   	fill自动闭合
   	stroke需要手动闭合
   ctx.save()
   	将画布当前状态(样式相关 变换相关)压入到样式栈中
   ctx.restore()
   	将样式栈中栈顶的元素弹到样式容器中
   	图像最终渲染依赖于样式容器
   	
   ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
   ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
   ctx.scale(因子):
   	放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
   			画布中图像所包含的css像素的个数不变
   	缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
   			画布中图像所包含的css像素的个数不变
   
   ctx.drawImage(img,x,y,w,h)
   	:在canvas中引入图片一定在图片加载完成之后再去操作
   ctx.measureText("文本")
   	:返回一个持有文本渲染宽度的对象
   ctx.fillText()
   ctx.strokeText()
   ctx.font
   ctx.textAlign
   ctx.textBaseline
   shadowOffsetX = float
   shadowOffsetY = float
   shadowBlur = float
   shadowColor = color(必需项)
   ctx.getImageData(x,y,w,h)
   	ImageData对象
   		width：选中区域在横向上css像素的个数
   		height：选中区域在纵向上css像素的个数
   		data:数组
   				选中区域所有像素点的rgba信息，rgba的取值从0到255
   ctx.putImageData(imgdata,x,y)
   ctx.createImageData(w,h)
   	返回的是imgdata对象 默认像素点的信息是rgba(0,0,0,0)
   ctx.globalAlpha
   	取值为0到1
   ctx.globalCompositeOperation
   	source-over(默认值):源在上面,新的图像层级比较高
   	source-in  :只留下源与目标的重叠部分(源的那一部分)
   	source-out :只留下源超过目标的部分
   	source-atop:砍掉源溢出的部分
   	
   	destination-over:目标在上面,旧的图像层级比较高
   	destination-in:只留下源与目标的重叠部分(目标的那一部分)
   	destination-out:只留下目标超过源的部分
   	destination-atop:砍掉目标溢出的部分
   ctx.ispointinpath(x,y)
   	x,y这个点是否在路径上
   

4. 实例

   时钟动画：结合了所有基础api
   飞鸟动画：结合图片创建动画
   马赛克：像素操作
   刮刮卡：合成+像素操作
   

七、H5音视频标签

<video>:Html5提供的播放视频的标签
	src:资源地址
	controls:该属性定义是显示还是隐藏用户控制界面
	
<audio>:Html5提供的播放音频的标签
	src:资源地址
	controls:该属性定义是显示还是隐藏用户控制界面
<source>
	视频：
	type='video/webm; codecs="vp8, vorbis"'
	type='video/ogg; codecs="theora, vorbis"'
	type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
	
	音频：
	type='audio/ogg; codecs="vorbis"'
	type='audio/aac; codecs="aac"'
	type='audio/mpeg'
video标签的属性
width  :视频显示区域的宽度，单位是CSS像素
height :视频展示区域的高度，单位是CSS像素
poster :一个海报帧的URL，用于在用户播放或者跳帧之前展示

src	  :  要嵌到页面的视频的URL
controls  :  显示或隐藏用户控制界面
autoplay  :  媒体是否自动播放
loop  	  :  媒体是否循环播放
muted  	  :  是否静音
preload   :  该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
		none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；
			换句话说就是提示浏览器该视频不需要缓存。
		metadata: 提示尽管作者认为用户不需要查看该视频，
			不过抓取元数据（比如：长度）还是很合理的。
		auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，
			可以下载整个视频，即使用户并不一定会用它。
		空字符串：也就代指 auto 值。
audio标签的属性	
src		  
controls  
autoplay  
loop  	  
muted  	  
preload

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

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

音视频js相关函数
play()  :  媒体播放
pause()  :  媒体暂停
load()  :  重新加载媒体

js相关事件
视频:
	abort	 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
	canplay	在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
	canplaythrough	在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使			得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
	durationchange	元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
	emptied	媒体被清空（初始化）时触发。
	ended	播放结束时触发。
	error	在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
	loadeddata	媒体的第一帧已经加载完毕。
	loadedmetadata	媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
	loadstart	在媒体开始加载时触发。
	mozaudioavailable	当音频数据缓存并交给音频层处理时
	pause	播放暂停时触发。
	play	在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
	playing	在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
	progress	告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
	ratechange	在回放速率变化时触发。
	seeked	在跳跃操作完成时触发。
	seeking	在跳跃操作开始时触发。
	stalled	在尝试获取媒体数据，但数据不可用时触发。
	suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
	timeupdate	元素的currentTime属性表示的时间已经改变。
	volumechange	在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
	waiting	在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

音频:
	abort	 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
	canplay	在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
	canplaythrough	在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使			得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
	durationchange	元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
	emptied	媒体被清空（初始化）时触发。
	ended	播放结束时触发。
	error	在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
	loadeddata	媒体的第一帧已经加载完毕。
	loadedmetadata	媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
	loadstart	在媒体开始加载时触发。
	mozaudioavailable	当音频数据缓存并交给音频层处理时
	pause	播放暂停时触发。
	play	在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
	playing	在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
	progress	告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
	ratechange	在回放速率变化时触发。
	seeked	在跳跃操作完成时触发。
	seeking	在跳跃操作开始时触发。
	stalled	在尝试获取媒体数据，但数据不可用时触发。
	suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
	timeupdate	元素的currentTime属性表示的时间已经改变。
	volumechange	在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
	waiting	在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

八、H5新增标签

状态标签
    meter:用来显示已知范围的标量值或者分数值。
	value:当前的数值。
	min:值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0
	max:值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1
	low:定义了低值区间的上限值,如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
	high:定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
	optimum:这个属性用来指示最优/最佳取值。
		<meter value="30" min="20" max="100" low="40" high="60" optimum="80"></meter>
   progress:用来显示一项任务的完成进度
	max:该属性描述了这个progress元素所表示的任务一共需要完成多少工作.
	value：该属性用来指定该进度条已完成的工作量.
			如果没有value属性,则该进度条的进度为"不确定",
			也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成
		<progress value="50" max="100"></progress>
列表标签
   datalist:datalist会包含一组option元素，这些元素表示其表单控件的可选值
			它的id必须要和input中的list一致
		<input type="text" placeholder="你最喜欢的女明星是？" list="zdy"></input>
		<datalist id="zdy">
			<option value="1">10岁的周冬雨</option>
			<option value="2">20岁的周冬雨</option>
			<option value="3">30岁的周冬雨</option>
			<option value="4">40岁的周冬雨</option>
		</datalist>
   details: 一个ui小部件，用户可以从其中检索附加信息。
		open属性来控制附加信息的显示与隐藏
   summary:用作 一个<details>元素的一个内容摘要（标题）
		<details>
			<summary>尚硅谷男生张晓飞</summary>
			<p>一个神一样的男人</p>
			<p>一个神一样的男人</p>
			<p>一个神一样的男人</p>
		</details>
注释标签
   ruby
   rt: 展示文字注音或字符注释。
		<span><ruby>澧<rt>li</rt>晓飞张</ruby></span>
标记标签
   marK:着重
		<span>晓飞同志是在<mark>世纪佳缘</mark>注册过的会员，他美丽的老婆就是来自于世纪佳缘</span>

九、H5新增表单

在Html5中:
	1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性
		form的action指向一个服务器地址（接口）
	2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值
		注意表单项的name属性必须有值，服务器才能获取表单
	3.所有之前的表单控件都保持不变
	4.仍然可以使用脚本操作表单控件
新增表单属性
	placeholder  :  输入框提示信息
		适用于form,以及type为text,search,url,tel,email,password类型的input	
	autofocus  :  指定表单获取输入焦点
	required  :  此项必填，不能为空
	pattern : 正则验证  pattern="\d{1,5}
	formaction 在submit里定义提交地址
	list和datalist  :  为输入框构造一个选择列表
			list值为datalist标签的id
表单验证反馈
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
node.addEventListener("invalid",fn1,false);

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

placeholder：怎么选中placeholder？
::-webkit-input-placeholder

1.class

classList.add()
classList.remove()
classList.toggle()

2.自定义属性：

data-gjqdgcs-yyy="yy"
testNode.dataset.gjqdgcsYyy = 111;

可编辑

<div id="test" contenteditable="true">
    sdsfdfdcd
</div>