canvas教程

Canvas学习:自定义的坐标变换(2)

字号+ 作者:H5之家 来源:H5之家 2017-08-04 13:02 我要评论( )

两个向量相乘是一种很奇怪的情况。普通的乘法在向量上是没有定义的,因为它在视觉上是没有意义的。但是在相乘的时候我们有两种特定情况可以选择:一个是点乘(Dot Product),记作 vk ,另一个是叉乘(Cross Product)

两个向量相乘是一种很奇怪的情况。普通的乘法在向量上是没有定义的,因为它在视觉上是没有意义的。但是在相乘的时候我们有两种特定情况可以选择:一个是点乘(Dot Product),记作 v¯k¯ ,另一个是叉乘(Cross Product),记作 v¯×k¯ 。

点乘

两个向量的点乘等于它们的数乘结果乘以两个向量之间夹角的余弦值。可能听起来有点费解,我们来看一下公式:

它们之间的夹角记作 θ 。为什么这很有用?想象如果 v¯ 和 k¯ 都是单位向量,它们的长度会等于 1 。这样公式会有效简化成:

现在点积只定义了两个向量的夹角。你也许记得 90 度的余弦值是 0 , 0 度的余弦值是 1 。使用点乘可以很容易测试两个向量是否正交(Orthogonal)或平行(正交意味着两个向量互为直角)。如果你想要了解更多关于正弦或余弦函数的知识,我推荐你看 可汗学院 的基础三角学视频。

所以,我们该如何计算点乘呢?点乘是通过将对应分量逐个相乘,然后再把所得积相加来计算的。两个单位向量的(你可以验证它们的长度都为1)点乘会像是这样:

要计算两个单位向量间的夹角,我们可以使用 反余弦函数 cos1 ,可得结果是 143.1 度。现在我们很快就计算出了这两个向量的夹角。点乘会在计算光照的时候非常有用。

叉乘

叉乘只在3D空间中有定义,它需要两个不平行向量作为输入,生成一个正交于两个输入向量的第三个向量。如果输入的两个向量也是正交的,那么叉乘之后将会产生3个互相正交的向量。接下来的教程中这会非常有用。下面的图片展示了3D空间中叉乘的样子:

不同于其他运算,如果你没有钻研过线性代数,可能会觉得叉乘很反直觉,所以只记住公式就没问题啦(记不住也没问题)。下面你会看到两个正交向量 A 和 B 叉积:

是不是看起来毫无头绪?不过只要你按照步骤来了,你就能得到一个正交于两个输入向量的第三个向量。

矩阵

现在我们已经讨论了向量的全部内容,是时候看看矩阵了!简单来说矩阵就是一个矩形的数字、符号或表达式数组。矩阵中每一项叫做矩阵的元素(Element)。下面是一个 2×3 矩阵的例子:

矩阵可以通过 (i, j) 进行索引, i 是行, j 是列,这就是上面的矩阵叫做 2×3 矩阵的原因( 3 列 2 行,也叫做矩阵的维度(Dimension))。这与你在索引2D图像时的 (x, y) 相反,获取 4 的索引是 (2, 1) (第二行,第一列)。

矩阵基本也就是这些了,它就是一个矩形的数学表达式阵列。和向量一样,矩阵也有非常漂亮的数学属性。矩阵有几个运算,分别是:矩阵加法、减法和乘法。

矩阵的加减

矩阵与标量之间的加减定义如下:

标量值要加到矩阵的每一个元素上。矩阵与标量的减法也相似:

矩阵与矩阵之间的加减就是两个矩阵对应元素的加减运算,所以总体的规则和与标量运算是差不多的,只不过在相同索引下的元素才能进行运算。这也就是说加法和减法只对同维度的矩阵才是有定义的。一个 3×2 矩阵和一个 2×3 矩阵(或一个 3×3 矩阵与 4×4 矩阵)是不能进行加减的。我们看看两个 2×2 矩阵是怎样相加的:

矩阵的数乘

和矩阵与标量的加减一样,矩阵与标量之间的乘法也是矩阵的每一个元素分别乘以该标量。下面的例子展示了乘法的过程:

现在我们也就能明白为什么这些单独的数字要叫做标量(Scalar)了。简单来说,标量就是用它的值缩放(Scale)矩阵的所有元素。前面那个例子中,所有的元素都被放大了 2 倍。

到目前为止都还好,我们的例子都不复杂。不过矩阵与矩阵的乘法就不一样了。

矩阵相乘

矩阵之间的乘法不见得有多复杂,但的确很难让人适应。矩阵乘法基本上意味着遵照规定好的法则进行相乘。当然,相乘还有一些限制:

  • 只有当左侧矩阵的列数与右侧矩阵的行数相等,两个矩阵才能相乘。
  • 矩阵相乘不遵守交换律(Commutative),也就是说 AB≠BA 。
  • 我们先看一个两个 2×2 矩阵相乘的例子:

    现在你可能会在想了:天哪,刚刚到底发生了什么? 矩阵的乘法是一系列乘法和加法组合的结果,它使用到了左侧矩阵的行和右侧矩阵的列。我们可以看下面的图片:

    我们首先把左侧矩阵的行和右侧矩阵的列拿出来。这些挑出来行和列将决定我们该计算结果 2x2 矩阵的哪个输出值。如果取的是左矩阵的第一行,输出值就会出现在结果矩阵的第一行。接下来再取一列,如果我们取的是右矩阵的第一列,最终值则会出现在结果矩阵的第一列。这正是红框里的情况。如果想计算结果矩阵右下角的值,我们要用第一个矩阵的第二行和第二个矩阵的第二列。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML5 CANVAS画图 beginPath和closeP

      HTML5 CANVAS画图 beginPath和closeP

      2017-08-04 15:03

    • canvas学习笔记(二):绘制图形

      canvas学习笔记(二):绘制图形

      2017-08-04 13:00

    • canvas学习总结(6):绘制矩形

      canvas学习总结(6):绘制矩形

      2017-08-04 12:02

    • 【canvas学习笔记二】绘制图形

      【canvas学习笔记二】绘制图形

      2017-08-04 09:01

    网友点评
    t