Canvas 斜拉

在制作课程 Canvas 变形 transform() 时我注意到它的参数 bc 用于斜拉画布,但是我翻遍了 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>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.