タグ

ブックマーク / peta.okechan.net (1)

  • Canvasでベジェ曲線 – 日曜研究室

    HTMLのCanvasにベジェ曲線を描くアルゴリズムを実装してみました。 CanvasをJavaScriptで操作した事がある方はオイオイと思われるかもしれません。なぜならCanvasのコンテキストオブジェクトにはbezierCurveTo()っていう3次ベジェ曲線を描くメソッドすでにあるからです(しかも速い)w しかし実装する過程で色々得るものがありましたのでよしとします。 まず最初に実装した、3次ベジェ曲線を特に工夫なく描画してみるですが、詳しくはソースを見ていただければと思いますが、Wikipediaに載ってたアルゴリズムほぼそのままで実装しました。 このシンプルなアルゴリズムであの複雑な式で表されるベジェ曲線を描けるなんて!とちょっと感動してしまいました。 で次に3次からn次に拡張すべく、n次ベジェ曲線を特に工夫なく描画してみるを実装してみました。再帰を使えば簡単にn次に拡張できる

    ga_ji
    ga_ji 2013/04/05
  • 1