-2

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/

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 の反対側のポイントからコンパスの半径幅として点 x と y の間の距離が与えられると、y 線を交点 q に移動します。

メソッドを使用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 時の方向 (_30degreesラジアンで同等の値を保持するローカル変数を使用) から 30 度手前にあり、radians : 12 時1.5*Math.PIの方向の場合.

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 に答える