础部分

坐标系

画布坐标、屏幕坐标的概念

• 屏幕坐标，绝对坐标，类似于css中的绝对定位
• 画布坐标，类似于css中的相对定位，还要考虑缩放

几何变换：平移、缩放、旋转

• 平移，位置移动，形状、相对位置不变
• 缩放，位置（相对屏幕坐标）和大小都发生变化
• 旋转，位置旋转，形状、相对位置不变

Canvas 中的所有几何变换针对的不是绘制的图形，而是针对画布本身，也就是说，当移动、缩放、旋转画布之后，新的坐标系只对新的操作生效

参考：

• Canvas 几何变换 - Canvas 基础教程 - 简单教程，简单编程
• Canvas 平移 translate() - Canvas 基础教程 - 简单教程，简单编程
• Canvas 缩放 scale() - Canvas 基础教程 - 简单教程，简单编程
• Canvas 旋转 rotate() - Canvas 基础教程 - 简单教程，简单编程

绘图步骤

基础绘图三步法

1. 获取canvas对象
2. 获取上下文环境对象context
3. 开始绘制图形。

示例代码

const canvas = document.getElementById("canvas");
const context = convas.getContext("2d");
context.fillRect(100, 100, 50, 50);

通用绘图步骤

1. 保存画布（状态），context.save();
2. 画布操作，context.transform（叠加） 或者 context.setTransform（不叠加）
3. 设置样式，绘制图形
4. 恢复画布（状态），context.restore();

图形变换基本操作

1. 清空画布，context.clearRect
2. 保存状态，context.save
3. 画布操作，doTransform
4. getShapeList and forEach
5. 恢复状态，context.restore

Canvas性能

Canvas的绘制和html的绘制是不一样的，html的绘制是增量的，当变化时，只会重新绘制变化的部分，没有变化的部分是不会重新绘制的，但是canvas不一样，每次都是全量绘制的，如果一个canvas里有很多图形，当改变一个图形时，需要重新绘制所有图形才可以（当然，可以用clearRect擦除部分区域，但一般很少这么用）。

了解canvas的绘制规则之后，就很容易发现性能问题，如果canvas上绘制了大量的图形（成千上万个），每次重绘就需要很长的时间，如果重绘的频率很高，那么就会有性能问题

那么如何解决这个问题呢，目前有以下几种方案

1. 使用图层
2. 使用临时图层
3. 使用webworker或wasm
4. 使用webgl

使用图层

图层的概念来自于PS，每一个图层都是一个canvas，既然在一个canvas上绘制太多图形会有性能问题，那么就分几个图层，每次仅重新绘制其中一个图层，每个图层的图形都不会很多，那么即使重绘的频率很高，也不会有性能问题。图层的概念图如下：

代码实现

用一个父元素作为容器，把所有的元素设置成一样的宽高并放在里面重叠。

<div class="container">
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
    <canvas width="500" height="500"></canvas>
</div>

使用临时图层

绘制是很耗性能的，如果每次都清空画布然后重新画一次，那么性能会消耗很大（即使分了几个图层），我们应区分“变”与“不变”的部分，只对“变”的部分重新渲染，“不变”的部分不渲染，将经常变化的部分抽离到临时图层，这样仅需要渲染临时图层，临时图层有几种实现思路，一种是使用操作图层（俗称高性能图层），一种是使用隐藏图层（不绘制到界面上的）

高性能图层

一般高频(实时响应鼠标、键盘等事件）的操作会放在高性能图层，等操作完成之后，再将最终结果保存到其它图层，比如绘制、拖拽、缩放一个（或一批）shape

隐藏图层

有些图层是不用给用户看的，这些canvas仅存在于内存中，不会插入html的dom中，用完就销毁，比如常见的canvas to image。

还有一种实现方式是离屏渲染(OffscreenCanvas)，先在一个offCanvas操作，然后再将结果渲染到界面上（有点像虚拟dom操作），一般会结合webworker或webassembly

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// 绘制图片，或其它操作
context.drawImage();
// 转成base64图片
convas.toDataUrl();

使用webworker或wasm

影响canvas性能的除了绘制频率，还有一个重要的是像素点操作，一般图像处理会涉及到大量的像素点操作，如果放在主线程计算，那么会卡住其它操作，造成页面卡顿，特别影响用户体验，这些涉及大量计算的一般会单独开个线程来操作，而在浏览器中有这个能力的就只有webworker了。

有了webworker可能还不够，因为始终是在js上执行，js执行效率天生就比其它语言慢，所以一般的会使用webassembly，执行效率比js快很多，而且还能用到更丰富的图像处理库

使用webgl

如果还有更高的性能要求，那么普通的2d canvas可能就无法满足了，这个时候可以使用webgl，性能更高（当然学习成本也更高），再结合wasm，就可以有无限想象力了，鼎鼎大名的figma就是用webgl + wasm(rust)实现的，另外google doc在线文档也使用了webgl，飞书文档将来也会替换成wegbl，基于浏览器的渲染始终有诸多限制，一般有能力的都会实现自己的渲染引擎。

业务中图片缩放的实现设计

假设canvas大小为（867，350）

图片的大小为（768，576）

将上面这张图片放到canvas中，图片贴边处理，也即图片太大就缩小，图片太小就放大。那么我们如何实现这种效果呢？

总结一下，总共分为几步：

1. 计算画布大小和图片大小
2. 计算如果将图片以原图大小放入画布中心，左上角的坐标
3. 将画布坐标移动到图片中心点
4. 将画布放大或缩小（scale=Math.min(画布宽度/图片宽度，画布高度/图片高度)）
5. 重新移动画布坐标到左上角
6. 绘制图片（或图形）

canvas的执行细节如下：

言

有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。

一、 纯 html 实现

1. 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素。

  <a href="#aa">跳转到 id 为 aa 标记的锚点</a>
  <p>-------------分隔线-------------</p>
  <div id="aa">a</div>

2. 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签。

  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <div id="abb">bbb</div>

注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说，看下面代码

「html 部分」:

  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 计算该 DOM 节点到 body 顶部距离
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滚动到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果，把上面的代码整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
  <p>-------------分隔线-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
  <p>-------------分隔线-------------</p>
  <a name="bb">name 为 bb 的 a 标签的锚点</a>
  <p>-------------分隔线-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滚动到 c</a>
  <p>-------------分隔线-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔线-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele为指定跳转到该位置的DOM节点
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果图：