-2

我想知道是否有人知道用css或canvas设计哥特式尖拱的来源或方法。

编辑：我的尝试是设置画布 quadraticCurveTo 方法的样式以适应哥特式弧线。但我失败得很惨，没有勇气在这里发布:)

  var canvas = document.getElementById('arch');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(188, 150);
  context.quadraticCurveTo(288, -100, 388, 150);
  context.lineWidth = 20
  context.strokeStyle = 'black';
  context.stroke();

http://jsfiddle.net/zumgugger/ZaqJ5/

4

1 回答 1

7

只是因为这古怪而有趣....

哥特式尖拱的一些几何形状可以在这里找到：

哥特式尖拱几何

也许哥特式建筑最知名的特征是尖拱。基本的哥特式拱门在结构上是等边的，是许多变体的基础。因此，等边拱的构造是： 从图中，指南针设置为跨度 ab。以 xy 作为弹跳线，罗盘位于 ax/y 的交界处，并从 x/yq 绘制一条曲线，如图所示。将罗盘放置在 bx/y 的交界处重复该过程，曲线连接的点形成上升 pq。从 ax/y 到 q 和从 bx/y 到 q 绘制直线，可以看出所得三角形在构造上是等边的，所有角均为 60°。

http://www.stonecarvingcourses.com/the-geometry-of-gothic-architecture

我已经组装了一个小小提琴来做到这一点。 http://jsfiddle.net/7c7Vc/1/

如果我的理解是正确的，这意味着（因为我不是数学家，我会用外行术语来描述）你需要绘制两条圆弧，圆规分别以点 x 和 y 为中心，从 x 上的相对点到y 线到交点 q，给定点 x 和 y 之间的距离作为指南针的半径宽度。

在示例中，我使用该arc方法来执行此操作，这是一个示例，它将绘制拱门的右侧弧...

ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);

解释

我们将指南针集中在点 x 上：

ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
        -------------

将我们的圆的半径设置为拱的宽度（点 x 和点 y 之间的距离）

ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
                       ---------

从 3 点钟方向开始绘制（正好是 0 弧度）

ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
                                  --

绘制弧线直到我们到达点 q，就我们绘制的弧线而言，它比 12 点钟的方向短 30 度（使用_30degrees以弧度为单位的局部变量）和弧度：1.5*Math.PI对于 12 点钟的方向.

ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
                                     ------------------------

我们要逆时针画这条弧线

ctx.arc(0, archHeight, archWidth, 0, 1.5*Math.PI + _30degrees, true);
                                                               ----

反向方法用于构成拱门的其他弧，看看这个例子

代码注释：

它使用一些模式来建立一个工厂，该工厂将根据高度或宽度创建你的拱门，返回的拱门知道如何在画布上绘制自己，并且工厂已经给它计算了高度和宽度。如果您不想使用此模式，您可以提取计算位并简化它。

于 2013-10-10T09:19:24.827 回答