canvasのサイズをwindowサイズに合わせて画面いっぱいに表示させたい。 そんなとき、canvasのサイズ指定をjQueryの.css()を使ってやろうとするとうまくいきません。 具体的に書くと、 HTML:
![HTML canvasを画面いっぱいに表示したい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a28011c521189d0beb28bba70506924fd1c27bd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9SFRNTCUyMGNhbnZhcyVFMyU4MiU5MiVFNyU5NCVCQiVFOSU5RCVBMiVFMyU4MSU4NCVFMyU4MSVBMyVFMyU4MSVCMSVFMyU4MSU4NCVFMyU4MSVBQiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTk3MTVjMDIzZGQ2YjQ2NjI5ODhhOTg5MDgxZTI5MDY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ29uc2hpX2NvbSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGVmNDcxMWMwMTM5OGJlM2NmYzA3NzM5YjUzYjI1NjE%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9874f5c41f230bdfeec290c89de8d840)
CreateJSでは、画像ファイル形式のPNG画像/JPEG画像/GIF画像/SVG画像を画面に表示することができます。Adobe PhotoshopやIllustratorなどのソフトウェアでグラフィックや写真・イラストを作成することで、表現の幅が広がるでしょう。それらのソフトウェアで汎用フォーマットのPNG形式もしくはJPEG形式で保存しておきます。 CreateJSで画像を表示するにはcreatejs.Bitmapクラスを利用します。コンストラクターの引数には画像のURLを設定します。 書式 new createjs.Bitmap(画像のURL); サンプル var bmp = new createjs.Bitmap("sample.png"); stage.addChild(bmp); サンプルを再生する サンプルのソースコードを確認する ※このサンプルでは、createjs.Ti
2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編(CanvasとWebGLの比較)と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト)は従
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLAtsushi Tadokoro
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子(パーティクル)の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
iPhoneでvideoタグのplayを叩くと、ビデオプレイヤーが立ち上がってしまいますがそのままブラウザ内で見たいというケースもあると思います。 そんなときにつかえるようなつかえないような技を紹介します。(iOS9.0.2 の iPhone6 では動きました) 用意するもの 再生したいムービー(mp4など) 再生したいムービーの音だけ切り出したもの(mp3など) ※ 音とムービーが同じ長さであることを前提としています ※ どちらもiOSで再生できるコーデックで書き出してください 方針 canvas、video、audioを用意 videoのsrcにmp4パスをいれる audioでmp3を再生 audioのcurrentTimeを取得 videoのcurrentTimeをaudioのcurrentTimeにあわせる(playはしない) canvasにvideoをレンダリング audioの再
今回はChapter12のノードガーデンを作成する。 パーティクルをランダムに移動させ、それぞれの距離が200ピクセルより近ければ、近いパーティクル方向へより加速させる。 [Flash] http://nouv.biz/labo/20120902_nodeGarden/flash/NodeGardenTest.html [ javascript] http://nouv.biz/labo/20120902_nodeGarden/javascript/nodeGarden.html 線を描画するときの透明度指定が少々ぎこちない。javascriptではこんな風なのだろうか。 var alpha=1-dist/minDist;//距離が遠いほど小さい→遠いほど透明になる var rgba=’rgba(255, 255, 255,’ + alpha + ‘)’; context.strokeSt
今回のお題は、ランダムに動く粒子の間に相互作用を加えたアニメーションだ。ランダムな動きにオブジェクト同士のインタラクションを交えると、有機的なアニメーションになってくる。Jared Tarbell氏がかつて「Node Garden」という作品を発表された。Keith Peters氏はそのノード間にバネ運動を加えて、著書『ActionScript 3.0アニメーション』で解説している。本稿はその表現をCreateJSで書いてみようと思う。 ステージのランダムな位置に、ランダムな方向と速さで動く小さなオブジェクトをたくさん置く。それらのオブジェクトの間に引っぱり合うバネのような力を与え、さらに互いを線で結ぶ(図1)。できあがりのコードは、jsdo.itに上げてある(例によって後で書き直すかもしれないが)。 図1 ランダムに動くオブジェクトの間に引合う力を与えて線で結ぶ ランダムに置いた
We hear you, EarthThe space company focused on the future of Planet Earth™Spire designs, builds and operates the world’s largest multipurpose satellite constellation. With our proven history in space infrastructure, we provide you with unprecedented access and insights from the ultimate vantage point – space. We empower you to navigate our changing world, reduce the cost of climate change and weat
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
はじめに いまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。 アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。 アニメーションサンプル なお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順 ざっくりと以下のような流れになります 要素を削除
皆さんはHTMLでモーションを作るときにどのトゥイーンライブラリを使用していますか? GSAP(グリーン・ソック・アニメーション・プラットフォーム)は、Flash全盛時代から存在する歴史あるトゥイーンライブラリです。 GSAPはCSS/HTML Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。GSAPの詳しい使い方は次の記事で解説しているので、使い方を知りたい方は以下の記事から参照ください。 GSAP入門(前編) - 基本的な使い方 GSAP入門(後編) - タイムライン機能など この記事では、GSAPのタイムスケールという機能を中心に解説します。 作成したモーションデモを紹介 今回はGSAPの機能の1つ「タイムスケール」を使って、3Dの表現を試してみました。まずは次の2つ
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer(IE)をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです(ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません)。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く