哥特式尖拱css或帆布

Question

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

编辑:我的尝试是设置画布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/

Answer 1

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

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

也许哥特式建筑最知名的特征是尖拱.基本的哥特式拱门在建筑中是等边的,并且构成了许多变体的基础.因此,等边拱的构造是:从图中,罗盘设置为跨度,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'oclock的方向开始绘制(恰好是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);
                                                               ----

反向方法用于构成拱的另一个弧,看一下这个例子

代码说明:

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