タグ

canvasとhtml5に関するmole-studioのブックマーク (2)

  • HTML5+Canvasでパーティクルっぽいのを作ってみる

    Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成

    HTML5+Canvasでパーティクルっぽいのを作ってみる
  • HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB

    2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。記事では口頭で発表した内容もできる限り記載しました。 なお、前編(CanvasとWebGLの比較)と後編(WebGLの最適化)の二部構成にしています。前編となる記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト)は従

    HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
  • 1