Canvas 斜拉 - Canvas 基础教程 - 简单教程，简单编程

在制作课程 Canvas 变形 transform() 时我注意到它的参数 b 和 c 用于斜拉画布，但是我翻遍了 API 手册又没有发现写的方法

算了，不管了，我还是来讲讲斜拉吧

斜拉 skew

旋转是将整个画布旋转一定的角度，X 轴与 Y 轴之间的夹角是不变的，保持 90 度

斜拉则是倾斜 X 轴和 Y 轴一定距离，改变互相垂直的关系

例如，正常情况下是这样的

当斜拉一定距离后，就变成了这样

直接导致了画布上所有点与屏幕左上角之间的角度再也不是简单的 y/x 了，而且距离也不是简单的 x^2 + y^2 的平方根了

倾斜的角度

那倾斜的角度和我们传递的距离是啥关系呢？

倾斜的角度是我们传递的距离的反正切值 atan(x)

比如我们传递参数 1，那么 atan(1) = 45度 = Math.PI/4 = 0.785398

我们可以使用 transform() 来实现斜拉效果

Canvas transform()

ctx.transform() 可以一次给 Canvas 添加多种变换，我们可以使用它缩放、旋转、移动和倾斜画布

语法

void ctx.transform(a, b, c, d, e, f);

参数	说明
a	水平缩放
b	水平倾斜
c	垂直倾斜
d	垂直缩放
e	水平移动
f	垂直移动

如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常

范例

下面的范例先在点 (50,50) 绘制一个橘黄色的 100x50 的矩形，然后将画布斜拉 transform(1,1,0,1,0,0)

最后在点 (50,50) 绘制一个 100x50 的绿色矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle="orange";
ctx.strokeStyle="orange"

ctx.moveTo(0,0)
ctx.lineTo(300,300);
ctx.stroke();
ctx.fillRect(10,10,100,50);
ctx.transform(1,1,0,1,0,0);
ctx.strokeStyle="black"
ctx.fillStyle="green";
ctx.fillRect(10,10,100,50);

ctx.beginPath();
ctx.moveTo(0,0)
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0)
ctx.lineTo(0,200);
ctx.stroke();

</script>

运行结果如下