前端 Canvas 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图之二维向量 (vector2) 函数库

前言

上一篇《前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图》介绍了在 canvas 中如何使用矩阵(matrix),及如何使用矩阵进行图形变换(transform)。但里面有用到的向量并没有详细介绍,本篇通过结合一个向量的函数工具库来介绍一下向量的应用,因为向量主要是用来描述对象的长度 / 运动距离,一般会在 canvas 动画里面会派上用场, 继续阅读“前端 Canvas 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图之二维向量 (vector2) 函数库”

前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图

前言

使用 canvas 画布来操控图形或者图片的二维变化的方式一般是平移、缩放、和旋转。canvas 已相应提供了相关的 api。如:translate(), scale() 和 rotate(),但这些功能无法统一处理并且无法描述当前画布的处于某种状态。为了实现这种统一连贯性的状态描述,canvas 给我们提供了另外一种思路及方法,即使用:transform() / setTransform();因为画布上的每个对象都拥有一个当前的 3 x 3 变换矩阵, 继续阅读“前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图”