《HTML5 Canvas核心技术》笔记

只记录关键、有用的知识点

基础知识

绘图系统

  • canvas 采用的是立即模式绘图系统，这意味着它在绘制完后，会立刻忘记刚才绘制的内容，不会保留所绘图形对象的列表。

  • svg 采用的是保留模式绘图系统，这意味着它在绘制完后，会维护一份所绘图形对象的列表。

画布和绘面大小

  • canvas元素实际上有两套尺寸，一个是元素本身的大小，一个是元素绘图表面的大小

  • 默认情况下，canvas元素与其绘图表面，都是300像素宽、150像素高的大小

  • 当设置canvas元素的宽高属性时，实际上是同时修改了该元素本身的大小与元素绘图表面的大小

  • 当通过css样式设置canvas元素宽高时，只会改变元素本身的大小，而不会影响到绘图表面大小

  • 当css设置的canvas元素宽高与绘图表面大小不一致时，浏览器就会对后者进行缩放，以适应容器尺寸

  • 当canvas元素宽高大于绘图表面宽高时，为了适应容器尺寸，绘图表面的每个像素都被放大显示，造成图像模糊

  • 当canvas元素宽高小于绘图表面宽高时，为了适应容器尺寸，绘图表面的每个像素都被缩小显示，造成图像缩小

  • 需要注意，canvas元素的宽高设置，只支持纯数值，不支持带px后缀，因为不符合Canvas规范

离屏canvas

  • 就是说，canvas元素支持即使在diplay: none下，也可以进行创建和操作，绘图功能不受影响

  • 离屏canvas可以将那些变化不大的绘制工作先完成，然后将数据状态传递给主屏canvas，让主屏canvas只负责变化大，需要多次绘制的部分，这样就能提高性能

绘图表面的保存/恢复

  • getImageData(sx, sy, sWidth, sHeight)：获取指定范围内的画布像素数据

  • putImageData(imagedata, dx, dy)：将给定画布像素数据绘制上去

绘图状态的保存/恢复

canvas元素API

绘图上下文API

事件处理

  • 鼠标事件

    • 鼠标的窗口坐标，最新游览器可以使用x、y属性，兜底可以使用clientX、clientY

    • 为了避免浏览器在双击后，自动选中HTML元素（蓝色高亮区块），或者改变光标的位置，可以使用：

      event.preventDefault(); // 让浏览器不再干预事件处理

  • 键盘事件

    • canvas是一个不可获取焦点的元素，只能在document或window对象上做按键监听

    • 对于keypress事件，浏览器只会在产生可打印字符时才触发它，长按时会不断触发

    • 按下字符键时，可以通过以下方法，将按键的Unicode编码识别为字符

      const strKey = String.fromCharCode(event.which)

    • 对于最新的现代游览器，如果想识别按键对应的字符，可以直接使用

      event.key

数学知识

  • 代数方程

    • 对于任意的代数方程，比如(10x + 5) × 2 = 110，进行如下操作后，等式两边依然成立（相等）

      • 给等式两端同时加、减、乘、除任意一个实数

      • 给等式的一端或两端同时乘以或除以1

  • 三角函数

    • Canvas中所有与角有关的API，都需要以弧度的方式来指定该角的值

    • 如何将角度转换为弧度，需要记住如下几个等式：

      • 180角度 = π弧度（π约等于3.14）

      • 1弧度 =（π/180）× 角度

      • 1角度 =（180/π）× 弧度

    • 正弦、余弦与正切函数

      • cos余弦 = 底边 / 斜边

      • sin正弦 = 对边 / 斜边

      • tan正切 = 对边 / 底边

    • 通过正弦、余弦和圆半径，计算x、y坐标

      • （对边）x坐标 =（斜边）半径 x 余弦值

      • （底边）y坐标 =（斜边）半径 x 正弦值

      • 余弦值 = Math.cos(弧度值)

      • 余弦值 = Math.sin(弧度值)

      • x = r * Math.cos(radians)

      • y = r * Math.sin(radians)

  • 二维向量

    • 概念

      • 向量：直角坐标系下用于表示大小和方向的坐标

      • 分量：用于表示向量x和y坐标的标量

      • 标量：没有方向，只有大小的数值量

      • 边向量：在多边形或任意几何形状中，连接两个相邻顶点的向量

      • 单位向量：长度固定为1的向量，用于表示方向的向量

      • 方向向量：表示从一点到另一点的方向，可以用单位向量的形式来表示

    • 向量运算

      • 向量大小：通过勾股定理进行计算

        // 勾股定理：任何三角形的斜边，等于另外两边平方和的平方根
var vectorMagnitude = Math.hypot(vector.x, vector.y)

        image

      • 向量方向：可通过单位向量表示，计算单位向量，可通过向量x、y坐标除以向量大小

        var vectorMagnitude = Math.hypot(vector.x, vector.y)
unitVector = new Vector()；
unitVector.x = vector.x/vectorMagnitude；
unitVector.y = vector.y/vectorMagnitude；

      • 向量加法：通过将多个向量相加，得到一个等效的向量，可用于计算力、位移、速度和加速度的合成

        var vectorSum = new Vector()
vectorSum.x = vectorOne.x + vectorTwo.x；
vectorSum.y = vectorOne.y + vectorTwo.y；

      • 向量减法：通过将多个向量相减，得到一个等效的向量，可用于计算力、位移、速度和加速的差值

        // 可计算出边向量
var vectorSum = new Vector()
vectorSum.x = vectorOne.x - vectorTwo.x；
vectorSum.y = vectorOne.y - vectorTwo.y；

      • 向量点积：用于计算2个向量的是否指向同一个方向，其结果为标量，计算方法如下：

        // 将两个向量对应的分量相乘，然后再将乘积相加
// 结果为正数，说明2个向量处于同一方向
// 结果为负数，说明2个向量处于不同方向
var dotProduct = vectorOne.x * vectorTwo.x + vectorOne.y * vectorTwo.y;

根据计量单位推导等式

  • 等式推导方法

    1. 以一个不等式开始，将要推的结果放在左端，将其余变量放在右端。

    2. 根据等式两端的计量单位，给等式的右端乘以一个或多个分数。这些分数的值都要是1，它们所采取的计量单位要能够消去原来等式右端的计量单位，使其符合等式左端的单位。

    3. 将等式右端相同的计量单位消去。

    4. 将等式右端的各个分数相乘，合并为一个分数。

    5. 带入一些很容易被验证的简单数值进去，以确保推导好的等式能够算出期望的结果。

  • 帧速度：帧速率 * 移动速度 / 1000毫秒

  • 帧速率：每帧持续的毫秒数，用毫秒/帧表示

  • 移动速度：每秒移动的像素数，用像素/秒表示

posted @ 2024-05-08 08:13  戡玉  阅读(75)  评论(0)    收藏  举报