Home - Kenji Saito Archives斎藤 健二 Saito Kenji
EaselJS の概要 (CreateJS のフレームワークその 1) - akihiro kamijo
前の記事で紹介した Flash Professional Toolkit for CreateJS は、CreateJS と呼ばれるオープンソースのフレームワーク群の使用を前提としています。そのため、Flash Pro から書き出された html ファイルと js ファイルは、Canvas の API を利用する代わりに CreateJS の API を呼び出します。 デモビデオ内で紹介されたコードは、こんな感じでした。 (lib.shadow2 = function() { this.initialize(); this.shape = new Shape(); ... ということで、書き出されたコンテンツの編集をするには、CreateJS の使い方を学ばないとダメそうです。 （単純なタイムラインアニメーションは別として...） ただし、これは、AS3 の知識がある人には、むしろ良い話か
HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog
JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ
HTML5のCanvasをFlashライクに使う「EaselJS」が最新版を公開
Flashのエンジニアとして著名なGrant Skinner氏が開発している、HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」の最新版、v0.4が公開されました。 9カ月振りになる最新版では、ビットマップアニメーションやスプライトシートエンジンを全面的に書き換えたとのことです。 completely reengineered sprite sheet engine, which includes a host of new features: multi-image sprite sheets, variable frame dimensions, frame reuse, image preloading, and a new data format. Note that this change will require som
BitmapData.js
canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); bmd = new BitmapData(256, 256, false, 0xff0000); color = 0x000000; for(y=0; y<bmd.height; y++) { for(x=0; x<bmd.width; x++) { bmd.setPixel(x, y, color+=0xff); } } bmd.fillRect(new Rectangle(156, 156, 100, 100), 0xdd00dd); context.putImageData(bmd.data, 0, 0);
NUTSU » [f5]HTML output test.
昨日のエントリ「SVG出力」に続いて HTML Canvas に出力してみるテストです。単純に Canvas を使ってみたかっただけなんですが、ものは試しということで。とはいえ役には立たないローテクであります。 上の画像は試作のキャプチャなのですが、左のSWFで描画している内容を ENTER_FRAME で 描画JSを ExternalInterface.call() する、といった内容です。同じ絵ができるだけ、なのですが。 試作は以下のURLからご覧ください。こちらノリで作っているモノなので動かない場合はご愛敬です。Winの Chrome と FireFox は普通に動いてましたが、Mac は未確認です。もちろんIEはスルーです。 html out test( canvas api required ) 予想よりも動作が快適でありました。SVGと同様に線幅は Canvas の方が細かく表
Canvasベースのアニメーションフレームワーク「jcotton」 | FreeWebDev.jp
「jcotton」 Canvasベースのjavascript用アニメーションフレームワークです。 オブジェクトを描画して動かしたり、テキストをレンダリングしたりする事が簡単にできるようです。 チュートリアルで実際の使い方が分かりやすく解説されています。 1 Vote(s)
Harmony [WebApp]
Sorry, this is Members Only content. Please Log-in. Join us today by becoming a Member. • Archive: Access thousands of projects, scores of essays, interviews and reviews. • Publish: Post your projects, events, announcements. • Discuss: Join our Discord for events, open calls and even more projects. • Education: Tutorials (beginners and advanced) with code examples and downloads. • Jobs Archive: Fi
![Harmony [WebApp]](https://cdn-ak-scissors.b.st-hatena.com/image/square/17bf0bf8283734aba50dea2e8c9da0c323e0cc3d/height=288;version=1;width=512/https%3A%2F%2Fwww.creativeapplications.net%2Fwp-content%2Fuploads%2F2010%2F03%2Fharmony02.png)
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。 <canvas> を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
canvaspod.io