タグ

ブックマーク / sterfield.co.jp (3)

  • Canvasで波のアニメーションを描画する | スターフィールド株式会社

    (function () { var unit = 100, canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw; /** * Init function. * * Initialize variables and begin the animation. */ function init() { canvas = document.getElementById("sineCanvas"); canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる canvas.height = 300; context = canvas.getContext("2d"); height = canvas.heigh

    Canvasで波のアニメーションを描画する | スターフィールド株式会社
    yasu-log
    yasu-log 2016/06/01
    【B!】Canvasで波のアニメーションを描画する | スターフィールド
  • CanvasにSVGファイルを読み込んで表示する | スターフィールド株式会社

    SVGは、Illustratorから直接ファイルを書き出すことができ、 書き出されたファイルのSVGのタグをHTML内に書き込むだけで、 HTML内に描画することができるので、扱いやすいですが、 多数の要素からなる、再描画を多く必要とするようなグラフィックが求められる場合、 パフォーマンスが著しく低下するという弱点があります(参考:  SVG と Canvas: どちらを選ぶか (Windows) )。 多数の要素からなる、再描画を多く必要とするようなグラフィックは、Canvasの方が向いており、 そういったグラフィックでは、高いパフォーマンスを発揮します。 しかし、CanvasはSVGのように、タグを置けば描画してくれたり、CSSで操作して色を変えたりアニメーションさせるといったことはできず、 より高度なグラフィックのプログラムの知識が必要となります。 描画した各要素をクリ

    CanvasにSVGファイルを読み込んで表示する | スターフィールド株式会社
    yasu-log
    yasu-log 2015/12/24
    【B!】CanvasにSVGファイルを読み込んで表示する | スターフィールド
  • flash変換ツールまとめ(swiffy,CreateJS,ExGame,reel) | ECサイト|システム開発会社|スターフィールド

    iOSでFlashを搭載しない変わりに代替する技術として、HTML5とJavaScriptによるアニメーション表現が発達してまいりましたが、マルチデバイス対応及びフィーチャーフォン(ガラケー)向けの資産を再利用したいという理由でflashを変換するツールも同時に複数立ち上がっています。 それぞれ案件でこなしながら、flash変換ツールに関して代表的なツール4つのメリット・デメリットをまとめてみました。 非エンジニアの筆者がまとめております点、ご容赦下さい。技術情報については末尾に参考記事を掲載しております。 swiffy(提供:GOOGLE) flaファイル変換系 https://www.google.com/doubleclick/studio/swiffy/ メリット 再現率が高い デメリット 出力したソースが複雑(minifyされている)であるため改修は困難。 画像がSVG形式である

    yasu-log
    yasu-log 2012/11/15
    [B!]flash変換ツールまとめ(swiffy,CreateJS,ExGame,reel) / 「新規で構築するのであれば、CreateJS一択でいいと思います。」とのこと
  • 1