持续不断更新中... 自己整理的一些前端知识点以及前端面试题，包括vue2，vue3，js，ts，css，微信小程序等

答：

1. 在普通的前端项目工程中，在script标签中增加setup即可使用api
2. 使用setup()钩子函数

答：

1. 不要在计算属性中进行异步请求或者更改DOM
2. 不要直接修改computed的值

区别：

1. 计算属性值基于其响应式依赖被缓存，意思就是只要他之前的依赖不发生变化，那么调用他只会返回之前缓存的结果，而watch是监听的对象发生变化，则会被触发，方法则是每次重新渲染或者手动调用就会发生变化

答：

• 使用 :class 进行绑定

• 使用内联样式进行绑定

答

应用场景：如果切换不是太频繁，则应该使用v-if，反之使用v-show

区别：v-if是销毁后在新建，v-show则是通过display:none来控制,v-show的性能比v-if的性能要高一些

答： vue2中v-for优先于v-if，vue3相反。不建议在同一节点同时使用vif，与v-for，如果想过滤一些数据的话，可以这样做

答：push()，pop()，shift()，unshift()，splice()，sort()，reverse()

• 事件修饰符

• 按键修饰符

• v-model修饰符

• vue2：

• vue3：

1. 全局注册：vue.component

2. 局部注册

   • setup注册：如果使用了setup函数，则在组件引入后，即可直接使用，而无需注册
   • components:直接在里面注册，然后在template模板中直接引用

1. 组合式api：使用defineProps函数

2. 选项式api：props

• vue在mounted实例挂载后才可以访问dom，因为此时vue实例已经挂载到了el上

答：因为vue中组件是复用的，如果组件中的data返回的是个对象的话，那么在多个组件同用一个data的时候，往往这个组件中的data发生了改变，那么其他组件也会发生改变。为了避免这个问题，就必须返回一个函数，这就相当于为每个组件开辟了一个私有的data

• MVVM是一种设计思想，M代表的是model，V代表的是视图，VM代表的是控制器，负责的是视图与数据模型的交互
• MVVM能实现前端开发和js逻辑层的分离

答：

• 父传子：父组件直接在子组件上绑定属性，然后子组件用props来接收
• 子传父：子组件使用**$emit(‘eventName’,params)**来向父组件传递信息，父组件使用on来监听子组件传递过来的事件，在methods中进行处理
• 父传子孙：使用provide 分发 ，inject接收
• 使用eventBus.js
• 插件使用vuex

• 把不常改变的库放到index.html中，用cdn来引入
• 使用路由懒加载
• 一些较小的图片使用base64格式返回
• 使用轻量型的工具库
• vue组件尽量不要全局引入
• 使用雪碧图（将多个小图片合并成一张大图，通过定位来控制位置）

• 压缩代码
• v-if和v-for区分使用场景
• 路由懒加载
• 单页面使用keep-alive缓存
• 使用防抖节流
• 避免书写行内样式，以免造成重绘
• 使用轻量型工具库
• dll分包

答：

1. 区别：

   • watch只追踪明确侦听的数据源，仅在数据源确实改变时触发回调
   • watchEffect则会在副作用发生期间追踪依赖，会在同步过程中，自动追踪所有能访问到的响应式属性

2. watchEffect的触发时机

   • 语法

   • post：能在侦听器回调中访问被 Vue 更新之后的 DOM，他的另一个别名函数叫做：watchPostEffect()

   • sync：有必要在响应式依赖发生改变时立即触发侦听器的时候 别名：watchSyncEffect()

3. watch的options

18.1，全局api

18.2，通用api

18.3，组合式api

答：

1. 第一次进入触发的生命周期是：created -> mounted -> activated，退出时触发deactivated
2. 第二次渲染时：只触发activated

通过路由中的meta对象下的keepAlive（boolean）属性来控制缓存组件是否缓存

语句：this.$route.meta.keepAlive=true||false

1. vue是一种基于MVVM软件设计架构的轻量型框架
2. vue可以进行组件化开发
3. vue可以实现双向数据绑定
4. vue视图和数据结构分离，
5. vue的生态好，有丰富的ui框架以及插件
6. vue不直接操作dom，vue是先通过diff算法生成ast树，然后通过pach算法比较差异，再生成dom树
7. vue是单项数据流

• 保证性能下限
• 无需手动操作dom
• 跨平台
• 缺点是无法进行极致优化

• 在vue.config.js中的devserve.proxy:{url:“地址”}中可以解决跨域
• 跨域是指不在同源策略（域名，协议，端口一致）内，就会产生跨域
• 也可以设置nginx（恩急壳死）反向代理来解决跨域
• 也可以用jsonp来解决跨域，只支持get调用

1. 分类：

   • 具名插槽：带有名字的插槽

   • 匿名插槽：没有名字的插槽，一个标签只能有一个匿名插槽

   • 作用域插槽：

   • 动态插槽名：

2. 缩写形式：#

3. 作用：可以扩展组件，增加组件的灵活性

1. 动态组件

   动态组件需要用keep-alive标签

2. 异步组件

   异步组件需要使用vue.component(“组件名”,callback():promise)，返回一个模板对象

1. vue2：

   使用了Object.defineProperty结合发布者/订阅设计模式，递归遍历对象的每个属性，为每个属性都设置了setter/getter，一旦属性发生了变化，则通知相关的订阅者，订阅者调用setter直接改变对象的属性

2. vue3： 使用Proxy代理对象来实现。

• 使用场景：当场景中用template实现起来代码繁琐且有大量重复的时候
• render(contentHTML,htmlStyle,vNode)，参数一：模板结构，参数二，模板样式，参数三，设置分发内容

• 渲染过程：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子beforeMount -> 子mounted ->父mounted
• 更新过程：
  1. 父beforeUpdate -> 子beforeUpdate -> 子updated ->父updated —
• 子组件更新过程
  • beforeUpdate -> updated
• 销毁过程：父beforeDestory -> 子beforeDestory -> 子destoryed ->父 destoryed

• 使用this.$route.go(0)
  • 优点：简单，方便，快，写的代码还少
  • 缺点：会有一秒钟的白屏和闪烁。用户体验机器不好
• 使用location.reload()：页面闪烁
• provide、inject和$nextTick：常用
• 新建空白页，利用路由跳转到一个空白页面，然后在空白页面中立即执行切换到原来的页面

答：存储在state中，改变state的状态只能通过mutation，或者通过Action使用commit触发mutation来改变状态111

答：

1. 把数据存到本地
2. 使用vuex-persist (破尔色死特）插件

• 使用dispatch||commit来触发action和mutition中得方法来改变state状态
• 使用getter来向外暴露state
• 然后在页面可以使用助手函数mapstate来获取vuex中得state，或者使用this.$store.state来获得数据

• Mutation可以直接改变state得状态，这里进行得是同步操作
• Action不可以直接改变state得状态，不过这里可以进行异步操作

答： 可以，因为每一个子模块中都有 state，namespaced，mutations，actions，getters，modules，而且模块中多了一个属性namespace(命名空间)，当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名，

1. Pinia 对 vue2 和 vue3 都支持,尤其是 Typescript 的项目
2. 没有模块的嵌套结构
3. 不需要注入、导入函数、调用它们
4. 无需手动添加 store ，它的模块默认情况下创建就自动注册的
5. 支持 Vue DevTools
6. 支持服务端渲染
7. Vuex： State、Gettes 、 Mutations (同步)、 Actions (异步)，modules（子模块） Pinia： State、Gettes 、 Actions (同步异步都支持)

答：

在组合式api中，需要先引入useStore函数

• 相同点：二者最终都是用来提交mutation来更改state的值的
• 不同点：dispatch是异步提交，commit是同步提交

1. 在watch直接监听$route(to,from)
2. 在路由导航守卫中监听，beforeRouterEnter

答： vue-router是vue官方指定的路由插件，是单页面应用的核心组成部分，vue-router用于设定访问路径，并将路径和组件映射起来。传统多页面应用中，页面跳转是用超链接来实现页面切换和跳转的，但在单页面应用中，页面跳转则是使用路径的切换，路由的作用是建立url和页面的映射关系 vue-router的实现主要靠url中的hash和history中新增的接口来实现的。

1. 在route-link中使用to属性来进行跳转
2. 在js中使用this.router.replace()，或this.router.back()来进行跳转

新建一个router文件夹，建立一个index文件，然后引入router，创建一个routers路由表，实例化一个router对象，使用这个路由表，设定mode

1. 全局守卫：

   • beforeEach(to,from,next)
   • afterEach

2. 独享守卫：beforeEnter（）

3. 组件内守卫

   • beforeRouterEnter
   • beforeRouterUpdate
   • beforeRouterLeave

1. 编程式路由

   • this.$router.push({name:“index”,params:{id:123}})
   • 接收参数，在路由页面使用this.$route.params来接收

2. 声明式路由

3. 获取路由参数

   this.route.query

route是页面路由对象，他里面会有query，params等属性，router是全局路由对象mate路由元数据等

• hash模式：利用window.hashChange来实现
• history：通过H5的history 新增的pushState和replaceState来实现

1. axios是基于promise的http库，是vue官方指定的http库
2. axios需要npm install axios 和npm install vue-axios
3. axios解决跨域需要在请求头加上content-type即可

• postcss-px-to-viewport
• 使用rem+媒体查询
• 使用flex布局

• uni. navigateTo (Object)：保留当前页面到路由栈中，然后跳转目标页面
• uni.redirectTo(Object)： 关闭当前页面，跳转到应用内的某个页面。
• uni.reLaunch(Object)：关闭所有页面，打开到应用内的某个页面。
• uni.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
• uni.navigateBack(Object)：关闭当前页面，返回上一页面或多级页面

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

使用onPageScroll 生命周期函数监听

在onTabItemTap()生命周期中写入代码

可能页面上存在图片，但是没有指定高度。

• 核心点：

  1. 提高加载性能

     • 加载流程：

       1. 代码包准备（下载代码包）优化措施：

          • 分包加载
          • 代码重构和优化：减少不常用的库引入和依赖
          • 避免在代码包中包含过多，过大的图片，应尽量采用网络图片
          • 清理无用代码

       2. 开发者代码注入

          1. 减少启动过程的同步调用

             • 在小程序启动流程中，会注入开发者代码并顺序同步执行App.onLaunch(昂蓝吃)，App.onShow，Page.onLoad，Page.onShow。
             • 在小程序初始化代码(Page，App定义之外的内容)和启动相关的几个生命周期中，应避免执行复杂的计算逻辑或过度使用以Sync结尾的同步API，如：wx.getStorageSync，wx.getSystemInfoSync等。
             • 对于getSystemInfo,getSystemInfoSync的结果应进行缓存，避免重复调用。

          2. 使用懒注入 通常情况下，小程序启动时，启动页面所在分包和主包（独立分包除外）的所有js代码会全部合并注入，包括其他未访问到的页面和未用到的自定义组件。影响注入耗时和内存占用

             • 开启仅注入当前页面需要的自定义组件和当前页面代码，在app.json中配置

       3. 初次渲染

          1. 骨架屏：提升用户等待意愿
          2. 提升首屏数据请求
             • 数据预拉取
             • 周期性更新
          3. 精简首屏数据：
             • 数据懒加载
             • 数据合并
             • 减少请求次数
             • 数据局部更新
          4. 缓存请求数据：可以使用wx.setStorage，wx.getStorage等读写本地缓存的能力，来提升首屏数据渲染

  2. 提高渲染性能

     1. 及时清理定时器，因为小程序共享一个js运行环境
     2. 谨慎使用onPageScorll
     3. 合理封装组件：可以将一些高频执行setData的功能模块封装成组件，
     4. 图片懒加载：渲染页面时，只渲染出现在视图范围内的元素。
     5. 善用onload和onReady：
        • onload是页面加载阶段，在onload阶段请求页面展示数据，
        • onready是页面加载完成阶段，对于页面之后需要展示或者使用，但刚开始并不展示的数据可以在onReady阶段进行请求。

1. 通过wx.login()获取code
2. 向服务端发送code
3. 服务端使用appid+appsecret+code登录凭证来对接微信接口服务
4. 后端返回seesion_key+openId，
5. 后端自定义登录态，与openid，session_key关联
6. 后端返回给前端自定义登录状态
7. 前端将登录状态存入本地（setStorageSync)
8. 前端携带登录态发起业务请求
9. 后端校验登录态，
10. 后端返回业务数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2rO9rkJy-1676604621014)(https://res.wx.qq.com/wxdoc/dist/assets/img/api-login.2fcc9f35.jpg)]

• 基本类型：typeof
• 复杂类型：instanceof, Array.isArray() , object.prototype.toString.call( type )

功能：对象A调用对象b的方法。改变this的指向，call的性能会更好一些。

不同的地方：传递参数不同，apply接收数组，call 接收参数1，2，3

==会进行类型隐式转换，===不会

同协议，同域名，同端口

基本类型：number，string ，boolean，null，undefined，symbol，

引用类型：array，object，

1. 优点
   • 统一异步api：
   • 可以链式调用。
   • 解决回调地狱（回调函数里嵌套回调函数）的问题
2. 缺点
   • 无法取消promise
   • 如果不设置回调函数，promise内部抛出的错误，不会反应到外部
   • 当处于pending状态时无法获取状态进展到哪个阶段。
   • Promise 真正执行回调的时候，定义 Promise 那部分实际上已经走完了，所以 Promise的报错堆栈上下文不太友好。

1. 用户输入域名，然后dns解析成ip地址
2. 浏览器根据ip地址请求服务器
3. 服务器响应http请求，并返回数据给浏览器
4. 浏览器开始渲染
   • 根据html，生成dom树
   • 根据css，生成css树
   • 将html树与css树结合，生成render树
   • 根据render树渲染页面
   • 遇到script，则暂停渲染，优先执行js，然后继续渲染。
   • 渲染完成。

1. 意外的全局变量
2. 没有及时清除的定时器
3. 脱离dom的元素引用（一个dom容器删除之后，变量未置为null，则其内部的dom元素则不会释放。）
4. 持续绑定的事件（函数中addEventListener绑定事件，函数多次执行，绑定便会产生多次，产生内存泄漏。）
5. 闭包
6. console.log不能被垃圾回收

• **缺点：**await可能会造成线程阻塞
• 优点：
  • 阅读性比较好。
  • 可以直接写在条件判断里
• 使用场景：
  • 并行的请求最好用pormise
  • 不需要并行的时候，如果要传递参数，最好用pormise

• 共同点：都是键值对的动态集合，支持删除和增加键值对

• 不同点：

  区别MapObject构造方式let Map = new Map([ [“key”,“value”]])let obj = { key:value}key的类型anystring||symbolkey的顺序有序（按照插入先后）无序size长度通过访问Map.size属性Object.keys() || for…in访问方式判断用has()，获取用get()，删除用delete()，获取所有keys()，清空clear()或者 迭代keys()，value()，entries()for…inJSON序列化JSON.stringify(Array.from(map))通过JSON.stringify()

• 宏任务：
  • 由宿主（浏览器或node）发起
  • 包括：setTimeout，setInterval，MessageChannel I/O(消息通道)，setImmediate(node环境)，script(整体代码块)
• 微任务：
  • 由js自身发起
  • MutationObserver(浏览器环境)，pormise.[then/catch/finally]，process.nextTick(node环境)
• 执行顺序：
  • 首先必须先执行所有的初始化同步任务
  • 然后会检查微任务队列，并将其清空
  • 接着取出第一个宏任务
  • 当该宏任务执行完成，会检查这个宏任务中还有没有微任务，如果没有就执行下一个宏任务，如果有，则清空微任务。然后再执行下一个宏任务。

1. 原型：js声明构造函数时，会在内存中创建一个对应的对象，这个对象就是原函数的原型，构造函数中有个属性prototype就指向原型对象，而实例化出来的对象会拥有一个proto属性，也指向原型
2. 原型链：当实例化的对象查找一个属性的时候，首先会在本身查找这个属性，如果没有，则去他的proto原型上去找，如果proto上没有，那么就去proto的原型中去找，这种链状过程就是原型链
3. 作用：数据共享，节约空间，实现集成

• 如果一个函数访问了此函数的父级及父级以上的作用域变量，那么这个函数就是一个闭包。

• 用途：防抖（在指定时间内，用户多次触发事件只触发一次），节流（在指定间隔时间内，请求只发送一次）

• 例子

• 闭包的优点：

  • 减少全局变量的定义数量，避免全局变量污染
  • 读取函数内部变量
  • 在内存中维护一个变量，可以用作缓存

• 闭包的缺点

  • 造成内存泄露，消耗内存，影响网页性能，解决方法是用完他之后，把他设置成null
  • 闭包可能在父函数外部改变父函数内部的值

• 跨平台：ts编译器可以安装在任何平台上
• es6特性：包含es6的大部分特性，如箭头函数
• 是一种面向对象的语言：如类，接口，模块
• 可选的静态类型
• DOM操作

• 代码阅读性更好
• 调试简单：高级调试器专注于在编译之前捕获逻辑错误。
• 跨平台

• Number：let num1:number = 1;
• string：let str = “字符串”
• 布尔型：true||false
• null型：表示未定义的值
• any：任意类型
• unknown：类型安全的any
• [] || Array :数组类型
• 元组：元组类型用来表示已知元素数量和类型的数组。各个元素类型可以不同，但是位置必须相同
• enum：枚举类型用于定义数值集合 enum Color {“red”,“green”,“Blue"}
• void：用于表示方法的返回值类型，
• undefined：表示值未定义
• never：表示从不会出现的值

• any表示任何值，只要沾上了any就代表ts将不会对这个值进行类型检查。
• 当一个变量需要赋值的数据类型不确定时，可以使用any类型，他可以赋值任何类型

• 以函数举例，当函数没有返回值的时候，可以适用void。注意不能将null 返回给void

• type：只能声明一次
• interface：可以声明多次
• enum：声明一个枚举变量
• let const var

enum枚举用来定义一组常量

• for(let i = 0;i<length;i++)
• array.forEach()
• for…of

• 接口基本使用

  • 接口可以重名，可以合并，
  • 用接口约束的对象 或者 类 要和接口里的一样，不能多 不能少。

• 类型别名基本使用

  • 描述一个对象的类型
  • 特点是：名称唯一 ，不能重复，实例化出来的对象属性不能多不能少。

• 区别：

  • 接口名称可以重复，而type不可以
  • 接口可以重复定义
  • type可以使用in关键字生成映射类型，而接口不行

• 使用建议：优先使用interface，公用的使用interface，其次再用type

• 相同点：都是用来定义一个未知类型的变量
• 不同点：
  • any：ts将跳过对此变量的类型检查
  • 泛型：不预先指定具体的类型，而是在使用的时候再使用来指定指定具体类型。

• 在函数中使用

• 在类中使用

• 在接口中使用

• 语法： 他的意思是说，我认为这个值是某个类型，编译器 请跳过检查。
• 特点：联合类型可以断言为其中一个类型，父类可以断言为子类，任何类型都可以断言成any。
• 注意：类型断言只会影响ts编译时的类型，编译结果出来后，类型断言会被删除。

• 使用parseInt
• 使用parseFloat
• 使用+ 号

• 类表示一组相关对象的共享行为和属性

安装ts-node， 然后使用命令

• 含义：其余参数允许你将不同数量的参数（零个或多个）传递给函数。
• 语法：，表示剩余参数存在了names数组里
• 注意：rest参数必须是参数定义的最后一个，并且每个函数只能拥有一个rest参数

• Omit允许你通过传递Type并选择Keys在新类型中省略来构造类型。Omit会构造一个除类型K外具有T性质的类型
• 语法：Omit<type,string>; 参数：第一个为继承的type类型，第二个为想要的key的字符串，多个字符串用|分开
• 简而言之，就是继承一个接口，然后过滤掉不想要的接口属性

函数名相同，但参数类型或返回值不同的函数就是重载。两个函数必须接收相同数量的参数

使用映射类型

• 语法：{ readonly [p in K] ?: T} //in 表示遍历，T表示ts中的任意类型

• 常见的类型语法：

• 这题的答案应该是用{ [P in K ] ?: T}

• 指的是相关变量，函数，类和接口的集合。
• 模块之间是用import引入，export来导出的。

1. 伪类（使用单冒号）：用来定义元素特殊状态的。如鼠标悬停，焦点样式，链接样式。举例：hover，active，link。
2. 伪元素（使用双冒号）：新建的一个虚拟元素，他不存在于文档中。判断是否是伪元素就看他是不是新建的元素

• 回流：元素的大小或者位置发生了改变，触发了 页面重新布局而导致渲染树重新计算布局或者渲染

  • 改变窗口大小，
  • 改变文字大小，
  • 添加/删除样式表
  • 用户输入
  • 激活伪类等等

• 重绘：元素样式的改变（但宽高，大小，位置不变），只改变自身元素，不改变其他元素。包括：

  • outline（设置元素轮廓），visibility（元素是否可见）,color(颜色)，background-color（背景色）

都是实现动画效果的，区别是，Animation可以定义动画关键帧，因此可以实现更复杂的动画效果。

• 语法：
• 书写顺序：当使用 时，小分辨率要放在大分辨率上面，如先写768px，再写992，再写1440，如果是用max-width时，要先写大的，再写小的

• 百分比布局：缺点是需要按照设计稿，换成成百分比单位
• 媒体查询布局（@media）：缺点是css代码量会增加很多，常用断点尺寸：576（small），>=576(sm) ，=>769(md)，=>992(lg)，=>1200(xl)，=>1400(xxl)。实际开发中，使用栅格布局+断点设定实现响应式
• rem布局：
  • rem是相对于html根元素的字体大小的单位
  • 通过修改html中根元素字体大小，来控制rem的大小
  • flexible.js插件可以实现。
• vw,vh响应式布局
• flex布局（不会脱离文档流），常用属性：
  • felx-direction（主轴方向）:row/row-reverse/column/column-reverse
  • flex-wrap(是否换行)：nowrap/wrap/wrap-reverse
  • flex-flow(direction,wrap的简写)：第一个参数是direction，第二个是wrap
  • justify-content(主轴上对齐方式)：flex-start/flex-end/center/space-between/space-around
  • align-item(侧轴对齐)：flex-start/flex-end/center/baseline（基线对齐）/stretch（拉伸）
  • align-content(多轴对齐)：flex-start/flex-end/center/space-between/space-around/stretch
  • 项目属性（flex容器的子元素）
    • order：子元素排序，数值越大越靠后
    • flex-grow：子元素占领空间百分比，自动增长并填满空间
    • flex-shrink：当父元素空间不够时进行缩小，数值越大，缩小的越多，0为不收缩
    • flex-basis：子元素初始占据空间大小。
    • flex(flex-grow,flex-shrink,flex-basis的简写)：默认值0，1，auto
    • align-self（单个子元素在侧轴上的对齐方式）：auto/flex-start/flex-end/cener/baseline/stretch

• 简介：canvas标签是一个图形容器，可以用js脚本来绘制图形。主要应用在动画，游戏画面，数据可视化，图片编辑，以及实时视频处理方面。

• 元素属性

  属性名含义值heightcanvas元素的高度numberwidthcanvas元素的宽度numbergetContext(“2d”)获取canvas上下文2dtoDataURL(type, encoderOptions)返回一个数据URL，该URL包含由类型参数指定的格式的图像（默认为png）encoderOptions在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量toBlob(callback, type, encoderOptions)回调函数，可获得一个单独的Blob对象参数其余两个参数含义同上

• 线条相关（设定线条样式，偏移量，实线虚线的）：

  属性描述值lineWidth线的宽度numberlineCap线末端的类型butt，round，squarelineJoin两线相交拐点类型miter,round，bevelmiterLimit斜切面限制比例10setLineDash([])设置当前的线段样式数组里的值依次对应虚线的线段和空白的长度，依次重复lineDashOffset(offset)从哪里开始绘制线

• 绘制矩形

  属性描述值clearRect（x，y，width，height)清除指定区域矩形fillRect(x，y，width，height)填充指定区域矩形strokeRect(x, y, width, height)使用当前的绘画样式（包括颜色等），描绘一个矩形

• 路径

  属性描述值beginPath()开始一条路径，或重置当前的路径。closePath()使笔点返回到当前自路径的起始点moveTo(x, y)将一个新的子路径的起始点移动到指定坐标lineTo(x, y)链接到指定坐标,可以理解为画到哪里arc(x, y, r, startAngle, endAngle, 是否逆时针)绘制一段圆弧arcTo(x1, y1, x2, y2, r)绘制两个点之间半径为r的圆弧rect(x, y, width, height)绘制一个矩形，可以通过fill或者stroke来填充或描边bezierCurveTo()贝塞尔曲线

• 绘制路径

  属性描述值fill()填充路径stroke()描边路径clip()将当前创建的路径设置为当前剪切路径的方法

• 填充和描边

  属性名作用默认值fillStyle设置或返回用于填充绘画的颜色、渐变或模式。strokeStyle属性设置或返回用于笔触的颜色、渐变或模式。

• 渐变:返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色

  属性名作用默认值createLinearGradient(x0, y0, x1, y1)创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 对象返回值可以作为描边或者填充的值使用createRadialGradient(x0, y0, r0, x1, y1, r1)确定两个圆的坐标，放射性渐变

• 图案：返回CanvasPattern对象，可以把此模式赋值给当前的fillStyle等，在 canvas 上绘制出效果

  属性名作用默认值createPattern(image, repetition)用指定的图片创建图案image可以是图片，视频，canvas的Element，或者canvas上下文，ImageData,Blob, ImageBitmap; repetition是重复方式，跟css里的背景图片重复参数一样

• 绘制文本

  属性名作用默认值fillText(text, x, y,[maxWidth])在指定位置填充绘制文本，最大宽度可选strokeText(text, x, y,[maxWidth])在指定位置描边绘制文本，最大宽度可选measureText(text)返回TextMetrics 对象

• 文本样式

  属性名作用默认值font设置字体 格式跟css的font一样关于字体的样式都是在这里一起设置的textAlign文本对齐方式start, end , left, right, centertextbaseline基线对齐方式top, hanging, middle, alphabetic (默认),ideographic, bottom.direction文本方向ltr, rtl, inherit (默认)

• 阴影

  属性名作用默认值shadowColor阴影颜色shadowBlur阴影模糊程度shadowOffsetX阴影水平偏移量shadowOffsetY阴影垂直方向偏移量

• 变换

  属性名作用默认值rotate(deg)坐标系顺势转旋转指定角度scale(x, y)canvas每个单位添加缩放变换translate(x, y)对当前坐标系平移transform()setTransform()resetTransform()

• 合成

  属性名作用默认值globalAlpha合成到canvas之前，设置图形和图像的透明度globalCompositeOperation设置如何在已经存在的位图上绘制图形和图像详细用法

• 绘制图像

  属性名作用默认值drawImage()绘制图像ctx.drawImage(image, dx, dy); 或者ctx.drawImage(image, dx, dy, dWidth, dHeight); 或者 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

• 像素控制

  属性名作用默认值createImageData(width, height 或者 imagedata)创建一个新的、空白的、指定大小的imageData对象从现有的 ImageData 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。getImageData(sx, sy, sw, sh)用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为shputImageData()ctx.putImageData(imagedata, dx, dy);或 ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);