H5——知识点总结（一）

H5

大纲

1. 新增的属性

   • placeholder
   • calendar,date,time,email,url,search
   • contenteditable
   • draggable
   • hidden
   • context-menu
   • data-val(自定义属性)

2. 新增的标签

   • 语义化标签（类似DIV的东西）
   • canvas（画板）
   • svg
   • audio（声音播放）
   • video（视频播放）

3. API

   • 定位（需要地理位置的功能）
   • 重力感应（陀螺仪）
   • request-animation-frame（动画优化）
   • History（控制当前页面的历史记录）
   • LocalStorage，SessionStorage（存储信息，比如：历史最高纪录）
   • WebSocket（解决通讯问题，在线聊天、聊天室）
   • FileReader（文件读取，预览）
   • WebWorker（文件的异步，提升性能，提升交互体验）
   • Fetch（传说中要替代Ajax的东西）

属性篇

1. placeholder

   • input框中的提示信息

2. input的type类型

   • calendar类 （chrome支持，火狐，safari，IE不支持。）
     • date,time,week,datetime-local
     • 长得丑，兼容性也不好。
   • number：只能填数字。（chrome支持。）
   • email：检验邮箱完整格式，如@。（chrome，火狐支持。）
   • color：颜色选择器。（chrome支持。）
   • range：设置min,max值，获得其中间的value。（chrome，Safari支持。）
   • search：搜索框，会记录搜索历史，下次作为提示。（chrome支持，Safari支持一点。）
   • url：检验格式，需填完整的网址。（chrome、火狐支持。）
   • 兼容性不利于实际中使用。

3. contenteditable

   • 默认为false
   • 点击文本时，可以修改内容。
   • 子元素可以继承来自父级的属性，子元素再设置可以覆盖。
   • 兼容性良好，可以使用。

    <div contenteditable="true">abcdefg</div>

4. draggable

   • 兼容性：chrome，Safari支持，Firefox基本不支持。
   • draggable=“true”
   • a标签，img标签默认为可拖拽的。
   • 拖拽的生命周期，拖拽的组成：
     • 拖拽开始，进行中，结束
     • 被拖拽的物体，目标区域
     • 被拖拽的物体的事件：
       • ondargstart：按下物体的瞬间是不会触发事件的，要移动一小下才触发；
       • ondrag：过程中一直触发
       • ondragend：松开点击鼠标时触发
     • 目标区域的事件：
       • ondragenter:不是元素图形进入就触发，而是拖拽的鼠标进入才触发。
       • ondragover:鼠标在目标区域内移动，不停触发。
       • ondragleave:鼠标离开目标区域，触发。
       • ondrop：需要先在ondragover中阻止默认事件e.preventDefault();才能触发drop。
     • 所有标签元素，当拖拽周期结束时，默认事件是回到原处。
     • 事件是由行为触发的，但是，一个行为可以触发不止一个事件。
     • ondragover -> 回到原处（默认）
       -> 执行drop事件
     • 事件调用链：责任链模式 A -> B（阻止） -> C
   • 练习：拖拽box练习。

5. e.dataTransfer

   • 兼容性差。
   • effectAllowed，只能在ondragstart中设置
   • dropEffect，只能在ondrop中设置
   • link,copy,move,copyMove,linkMove,all

    oDragDiv.ondragstart = function(e){
        e.dataTransfer.effectAllowed = "link";
    }

标签篇

1. 语义化标签

   • header、footer、nav
   • artical：文章，可以直接被拿走引用的内容
   • section：段落
   • aside：侧边栏

2. canvas画布

   • 适合用于小面积的绘图，适合动画。因为用JS控制。
   • 画布大小：要写在canvas标签行间样式；
   • 启动（相当于画笔）：var can = dom.getContext(“2d”);//2d参数不能忘；
   • 基本操作：

  var canvas = document.getElementsByClassName('can')[0];
  var ctx = canvas.getContext("2d");//启动，画笔

  ctx.lineWidth = 10;//当前落笔路径的粗细
  ctx.moveTo(100, 100);//移动笔
  ctx.lineTo(200, 100);//划线，但不显示
  ctx.stroke();//显示出划线

  ctx.beginPath();//新的一笔
  ctx.lineWidth = 5;//当前落笔路径的粗细
  ctx.moveTo(200, 100);//移动笔
  ctx.lineTo(200, 200);//划线，但不显示
  ctx.lineTo(150, 200);//划线，但不显示
  ctx.closePath();//闭合当前这笔的路径的起点终点
  ctx.stroke();//显示出划线
  ctx.fill();//填充闭合的区域

• 画矩形的三种方法

  //画矩形三种方法
  ctx.moveTo(100, 100);
  ctx.lineTo(300, 100);
  ctx.lineTo(300, 200);
  ctx.lineTo(100, 200);
  ctx.closePath();
  ctx.stroke();

  //起点，宽，高
  ctx.rect(100,100,200,100);
  ctx.stroke();
  ctx.fill();

  //无填充的
  ctx.strokeRect(100,100,200,100);
  //有填充的
  ctx.fillRect(100,100,200,100);

• 画弧形或者圆形

  //圆心X,Y， 半径R， 起点， 终点， 方向（0顺，1逆）
  ctx.arc(100, 100, 50, 0, Math.PI * 1.8, 0);
  ctx.lineTo(100, 100);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

• 圆角矩形

  //圆角矩形（四个直线加弧度）
  ctx.moveTo(100, 110); //起点，预防多出的10小线段
  //原本直线的终点B坐标，弧度的方向C坐标，弧度大小
  ctx.arcTo(100, 200, 200, 200, 10);
  ctx.arcTo(200, 200, 200, 100, 10);
  ctx.arcTo(200, 100, 100, 100, 10);
  ctx.arcTo(100, 100, 100, 200, 10);
  ctx.fill();
  ctx.stroke();

• 贝塞尔曲线

  ctx.beginPath();
  ctx.moveTo(100, 100);//P0
  //二次贝塞尔曲线 P1 P2
  //ctx.quadraticCurveTo(200, 200, 300, 100);
  //三次贝塞尔曲线 P1 P2 P3 
  //ctx.bezierCurveTo(200, 200, 300, 100, 400, 200);
  ctx.stroke();

• 变换操作：

  // ctx.beginPath();
  // ctx.translate(100, 100); //移动坐标系，从左上角移动100，100
  // ctx.rotate(Math.PI / 6); //根据坐标系原点，旋转30度
  // ctx.moveTo(0, 0);
  // ctx.lineTo(100, 0);
  // ctx.stroke();

  ctx.beginPath();
  ctx.strokeRect(50, 50, 100, 50);
  ctx.scale(1.5, 2); //所有X坐标*1.5，Y坐标*2
  ctx.strokeRect(50, 50, 100, 50);

• 保存、取出坐标系的平移、缩放、旋转数据

  ctx.save();//先存一下初始数据
  ctx.beginPath();
  ctx.translate(100, 100);
  ctx.rotate(Math.PI / 4);
  ctx.strokeRect(0, 0, 100, 50);

  ctx.beginPath();
  ctx.restore();//重置还原数据
  ctx.translate(100, 100);
  ctx.fillRect(200, 0, 100, 50);

• 填充背景色、背景图

  //填充颜色
  ctx.beginPath();
  ctx.fillStyle = 'blue';
  ctx.fillRect(200, 0, 100, 50);
  //填充背景图
  var img = new Image();
  img.src = "./img/02.jpg";
  img.onload = function() {
      ctx.beginPath();
      ctx.translate(100, 100); //因为不重复，所以图片是从原点开始填充的
      var bg = ctx.createPattern(img, "no-repeat"); //创建纹理，不重复
      ctx.fillStyle = bg;
      ctx.fillRect(0, 0, 200, 100);
  }

• 线性渐变

  ctx.beginPath();
  var bg = ctx.createLinearGradient(0, 0, 200, 200); //A,B两点渐变方向
  bg.addColorStop(0, "white"); //关键帧，0-1之间
  bg.addColorStop(0.3, "red"); //关键帧，可以添加多个
  bg.addColorStop(1, "orange"); //关键帧
  ctx.fillStyle = bg;
  ctx.translate(100, 100); //渐变填充也是从原点开始的，所以也要移动坐标系
  ctx.fillRect(0, 0, 200, 150);

• 辐射渐变

  ctx.beginPath();
  var bg = ctx.createRadialGradient(100, 100, 30, 100, 100, 100);
  //两个圆，不同圆心位置有不同效果，有需要再查。
  bg.addColorStop(0, "white");
  bg.addColorStop(0.5, "orange");
  bg.addColorStop(1, "white");
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, 200, 200);

• 阴影

  ctx.beginPath();
  ctx.shadowColor = "red";//颜色
  ctx.shadowBlur = 30;//扩散度
  ctx.shadowOffsetX = 15;//X偏移
  ctx.shadowOffsetY = 15;//Y偏移
  ctx.strokeRect(50, 50, 200, 200);

• 绘制文字

  ctx.beginPath();
  ctx.strokeRect(0, 0, 100, 100);
  ctx.font = "30px Georgia";//需要包含两个参数，大小，字体
  ctx.strokeText("abc", 200, 100);//描边字体
  ctx.fillStyle = "red";
  ctx.fillText("def", 200, 150);//填色字体

• 线端样式（两端/连接处）

  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.moveTo(50, 100);
  ctx.lineTo(150, 100);
  ctx.lineCap = "square"; //加帽子butt（默）/square/round
  ctx.stroke();
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.strokeRect(50, 50, 100, 100);

  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.moveTo(200, 100);
  ctx.lineTo(300, 100);
  ctx.lineTo(50, 150);
  ctx.lineJoin = "miter"; //连接处miter（默）/bevel/round
  ctx.miterLimit = 5 //连接处锋锐阈值，超过阈值部分截断
  ctx.stroke();

3. SVG

• 矢量图，放大不会失真。适合大面积的贴图。

• 通常动画较少，或者较简单。用标签和CSS画出。

• 基本操作：

• 画线、画矩形

// 线条需要stroke，闭合图形则直接生成
  <style>
      .line1 {
          stroke: black;
          stroke-width: 5px;
      }
  </style>

  <svg width="500px" height="300px" style="border:1px solid #333">
      <line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
      <rect height="50" width="100" x="0" y="0" rx="25" ry="25"></rect> 
  </svg>

• 圆、椭圆、折线

  //不想填充，且画出边线
  circle,
  ellipse,
  polyline {
      fill: transparent;
      stroke: lightcoral;
  }
  <!-- r都是半径 -->
  <circle r="50" cx="50" cy="150" ></circle>
  <ellipse rx="60" ry="40" cx="250" cy="150"></ellipse>
  <!-- 折线默认闭合填充 -->
  <polyline points="50 50,70 70,70 100,100 100,100 70"></polyline>

• 多边形、文本

  polygon {
      fill: transparent;
      stroke: lightcoral;
      stroke-width: 5px;
  }
  text {
      fill: transparent;
      font-size: 50px;
      stroke: lightcoral;
      stroke-width: 3px;
  }
  <!-- polygon不填充也会闭合为多边形 -->
  <polygon points="50 50,70 70,70 100,100 100,100 70"></polygon>
  <text x="150" y="100">ABCDEF</text>

• 透明度、线端样式

  .polyline1 {
      /* fill: transparent; */
      stroke: lightcoral;
      stroke-width: 20px;
      stroke-opacity: 0.5;
      fill-opacity: .3;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  <polyline points="50 50,100 100,100 150,150 150,150 100" class="polyline1"></polyline>

• path路径标签

  path {
      fill: transparent;
      stroke: lightcoral;
      stroke-width: 5px;
  }

  <!-- 大写表示绝对位置，小写为相对位置。Z闭合区间，不区分大小写 -->
  <!-- <path d="M 100 100 L 200 100 L 200 200"></path> -->
  <!-- <path d="M 100 100 L 200 100 l 200 200"></path> -->

  <!-- <path d="M 100 100 H 200 V 200 Z"></path> -->
  <!-- <path d="M 100 100 h 200 v 200 z"></path> -->

  <!-- 画椭圆、画弧 -->
  <!--M 起点X Y A 长半径 短半径 旋转角度 大小弧 顺逆针 终点X Y -->
  <path d="M 80 100 A 80 60 45 1 0 180 160"></path>

• 线性渐变、高斯滤镜

  // 先在<defs>中定义，然后样式中用url()引入。  
  rect.rrr {
      fill: url(#bg1);
      filter: url(#gauss);
  }

  <defs>
      <linearGradient id="bg1" x1="0" y1="0" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color: rgb(255, 255, 0);"></stop>
          <stop offset="50%" style="stop-color: rgb(58, 28, 168);"></stop>
          <stop offset="100%" style="stop-color: rgb(255, 25, 0);"></stop>
      </linearGradient>

      <filter id="gauss">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
      </filter>
  </defs>

  <rect class="rrr" x="100" y="100" width="200" height="100"></rect>

• 虚线、简单动画

  @keyframes move1 {
      0% {
          stroke-dashoffset: 50px;
      }
      100% {
          stroke-dashoffset: 150px;
      }
  }
  .line2 {
      stroke: black;
      stroke-width: 10px;
      stroke-linecap: round;
      stroke-dasharray: 100px;
      stroke-dashoffset: 50px;
      animation: move1 1s linear infinite alternate;
  }
  <line class="line2" x1="100" y1="100" x2="200" y2="100" ></line>

• viewBox比例尺
  • svg属性：起点X,Y,宽度X1，高度Y1（会按X1Y1进行缩放）

4. 音频audio、视频vedio

   • 实现控制区域定制化样式。