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レンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
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);
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ページを開く
