1. querySelector() 方法仅仅返回匹配指定选择器的第一个元素

2. e.target 是目标对象，e.event是目标所发生的事件。
   

//Canvas绘制的总体步骤
//1.创建HTML页面，设置画布标签
    <canvas id="cvs"></canvas>
//2.编写js，获取DOM对象
    var cvs = document.getElementById('cvs'); //画布
//3.获取2D上下文
    var ctx = cvs.getContext('2d'); // 画笔
//4.设置绘制线样式、颜色
  ctx.fillStyle = "red";
  ctx.strokeStyle = "red";
//5.绘制矩形，或者填充矩形(x,y,w,h)
  ctx.strokeRect(10, 10, 190, 100);
  ctx.fillRect(20, 10, 20, 20);
  
  直线：
   ctx.moveTo(50,50);
   ctx.lineTo(200,200);
   ctx.stroke();
  圆：
   cxt.beginPath();   
   cxt.arc(50,50,40,2,Math.PI*2,true);    
   cxt.closePath();   
   cxt.stroke();
  渐变：
   var c=document.getElementById("myCanvas");
   var cxt=c.getContext("2d");
   var grd=cxt.createLinearGradient(0,0,175,50);
   grd.addColorStop(0,"#FF0000");
   grd.addColorStop(1,"#00FF00");
   cxt.fillStyle=grd;
   cxt.fillRect(0,0,175,50);
  图像;
   var c=document.getElementById("myCanvas");
   var cxt=c.getContext("2d");
   var img=new Image()
   img.src="flower.png"
   cxt.drawImage(img,0,0);

1. svg是基于XML标记语言可缩放矢量图形，支持无损缩放。

2. SVG的优势：

   文件体积小，能够被大量的压缩

   图片可以无限放大而不失真（矢量图的基本特征）

   在视网膜显示屏上效果极佳

   能够实现互动和滤镜效果

3. viewport是SVG图像的可见区域，个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。

   在<svg>元素中使用width和height属性来指定viewport的尺寸。

4. <svg width="100px" height="50px"></svg>//单位可带可不带,默认为px

5. 详情见：https://developer.mozilla.org/zh-CN/docs/Web/SVG
   

https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js

 //1.传建一个观察者对象
  var observer=new Observer();
 //2. 通过subscribe方法，实现一个函数的观察
 observer.publish("任务名",处理函数) 
 //3. 通过publish触发观察事件，在任意时刻触发了这个观察的任务名，将会触发这个事件订阅subscribe方法
 observer.punlish("任务名")
 //4. 取消事件订阅，意味着就不会执行了
 observer.unsubscribe("任务名")

1. deferred对象是jQuery对Promises接口的实现
   

   详解见https://www.cnblogs.com/losesea/p/4415676.html

2. var dtd=$Deferred();//创建
   dtd.resolve();    //成功
   dtd.then();          //执行回调

   
   

1.3D视图：
    需要指定一个元素为容器并设置transform-style:preserve-3d，这样它的后代元素也会有3D效果
    （如果孙元素也有3D效果，还需给子元素设置preserve-3d）
    三维变形也可以用transform属性来设置
    可以呈现3D的属性：translate3d、 scale3d   rotateX  rotateY  rotateZ

2.透视效果：
    perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。

1.background-size解决自适应问题

2.运动=关键帧+坐标变化（position+translate）

3. transition-property: width;(过渡的CSS属性的名称)
   transition-duration: 1s;(过渡效果花费的时间。默认是 0。)
   transition-timing-function: linear;(过渡效果的时间曲线。默认是 "ease"。)
   transition-delay: 2s;(过渡效果何时开始。默认是 0。)
   简写：$(".bird").transition({    'right': "3rem",}, 10000,'linear',function(){    alert("结束")});

1. CSS3的animation的八个属性：
   animation-name:动画名
   animation-duration:时间
   animation-delay：延时
   animation-iteration-count：次数
   animation-derection：方向
   animation-play-state：控制
   animation-fill-mode：状态
   animation-timing-function：关键帧变化steps()函数

2. 简写animation:(name duration timing-function iteration-count)

3. -moz- 支持火狐浏览器

4. -webkit-   支持Safari和chrome

5. -o- 支持Opera

   
   

1.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
//用来监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
2.window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
//绑定浏览器缩放和加载时间
3.docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
//表示在不同屏幕尺寸下，设置不同的跟字体大小，比如在320的屏幕尺寸下，跟字体大小为16px.
4.16px=1rem

：呈现3d效果需要3部分

1.  父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度

2. 3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作

3. 3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等

animation-name ：动画名 animation-duration：时间 animation-delay：延时 animation-iteration-count：次数 animation-direction：方向 animation-play-state：控制 animation-fill-mode：状态 animation-timing-function：关键帧变化

一、 技术点分解

知识点2

知识点1