omachizura

仕事メモ、役に立ったスキルをまとめています。


役立つスキル、テクニック集 3ページ目


  • canvasの多角形の描画方法とパスの基本的な考え方

    多角形を描画するためには、起点となる座標だけでなく、各頂点の座標もすべて指定する必要があります。各頂点の座標を指定し、指定した順番に頂点同士を線でつないでいけば多角形を描画することができます。考え方と...


  • highlight.jsをローカルで実行してハイライトされたファイルを出力

    ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。highlight.jsという便利なライブラリを使っていましたが...


  • html5 canvasで円・円弧を描画する

    今回は直線だけでなく、円を描画する方法を紹介します。自由自在に曲線を描画するのは複雑な考え方が必要ですが、円(正円)を描画するだけなら1つの関数だけでできます。


  • canvasのアニメーションの基本的な考え方

    今回は描画した図形を動かしてアニメーションを行う方法を紹介します。アニメーションはパラパラマンガのように、微妙に違う静止画を連続で切り替えることによって動いているように見せることで表現します。


  • canvasのアニメーションで軌跡・残像・フェードアウトを表現する

    アニメーションを応用し軌跡や残像を残したり。フェードアウトする方法を紹介します。軌跡を残すためにはクリアする処理をなくす必要があります。クリアをしなければ、前回描画した状態に対して追記する形になるため...


  • canvasでグラデーションを表現する

    線形グラデーションを使う場合はまずこの関数を使用して、グラデーションのオブジェクトを作成します。グラデーションを描画するという関数ではなく、グラデーションを定義する関数ですので、この関数を実行しただけ...


  • 数学のグラフをcanvasのアニメーションでわかりやすく描画

    中学・高校で習う数学のグラフをcanvasのアニメーションを利用してわかりやすく描画します。グラフの縮尺は無視して形だけイメージしてください。


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • gulpのpipeで独自のファンクションを実行する

    gulpのpipeの中で独自に定義したファンクションを実行し、srcで指定した各ファイルの内容を変更したい場合、through2というモジュールを使用すれば実現できます。through2を使えばプラグ...