PixiJS v4The HTML5 Creation EngineCreate beautiful digital content with the fastest, most flexible 2D WebGL renderer.
DarkroomJS
DarkroomJS Extensible image editing tool powered by HTML5 canvas. Introduction DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping. It is based on the awesome FabricJS library to handle images in HTML5 canvas. UPDATE: The project has been discontinued. As an alternative you should have a look at Pintura Image Editor. Pintura sup
テオ・ヤンセン機構をHTML5 Canvasでアニメーションに - roombaの日記
はじめに オランダのアーティストであるTheo Jansen(テオ・ヤンセン)氏は、風力によって歩行する巨大な脚「ストランドビースト」をつくったことで有名です。「ストランドビースト」には特殊なリンク機構(Jansen's Linkage)が用いられており、これによって風力による回転運動を生物のように生き生きとした脚の動きに変換しています。 Theo Jansen Japan Jansen's linkage - Wikipedia, the free encyclopedia 以下のような組み立てキットも発売されています。私も持っていますが楽しいです。 大人の科学マガジン Vol.30 (テオ・ヤンセンのミニビースト) (Gakken Mook) 作者: 大人の科学マガジン編集部出版社/メーカー: 学習研究社発売日: 2011/01/14メディア: ムック購入: 13人 クリック: 267
Physics for JavaScript
A two-dimensional port into JavaScript of the popular Traer Physics Library from Processing. Downloads Development Version Uncompressed with comments about 25kb Production Version Minified using Closure Compiler about 12kb Or check out the source code on github. Purpose There are many great physics engines out there for JavaScript, so why go and make this one? And, more importantly why would I use
iio Engine: JavaScript Game Engine for HTML5 Canvas
iio.js is a framework for HTML5 Canvas
enchant.js v0.6.2 をリリースしました | enchant.js - A simple JavaScript framework for creating games and apps.
Posted 2012年12月31日 by fushimi & filed under リリースノート. こんにちは。開発チームの伏見です。 enchant.js v0.6.2 をリリースしました。こちらからダウンロードできます。 主な変更点は以下の通りです。 Lazy-Scene による Android 描画の高速化 (#145) v0.6系のSceneはCanvas描画とDom描画を、Sceneが持つCanvasLayerオブジェクトとDomLayerに行います。Sceneに追加するEntityが_elementプロパティを持つかによって、CanvasLayerに描画するかDomLayerに描画するかを振り分けていました。 現在のバージョンではSceneの生成時にCanvasLayerとDomLayerを生成しSceneの持つdiv要素に追加しているため、常にCanvasの上にdiv要
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
Protovis - Examples
Gallery Enjoy these sample visualizations built with Protovis. For any example, use your browser to view the source or the backing dataset. Protovis is no longer under active development. The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in
CanvasタグとJavaScriptで3Dのデモを作ってみました | ClockMaker Blog
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
Canvas Pad
// Draw black rect ctx.fillRect(50, 20, 145, 145); // Draw blue rect ctx.fillStyle = "rgb(0, 162, 232)"; ctx.fillRect(135, 85, 125, 125); // Increase line width ctx.lineWidth = 5; // Draw black rect outline ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.strokeRect(50, 335, 145, 145); // Draw blue rect outline ctx.strokeStyle = "rgb(0, 162, 232)"; ctx.strokeRect(135, 275, 125, 125); // Draw transparent yell
Ben Joffe |Torus
How To Play Use the arrow keys to guide the falling blocks, spacebar and the up-arrow will rotate the block in opposite directions. Alternatively the keys A,W,S and D can be used as arrow keys for the same purpose. When a complete horizontal ring of 15 blocks is occupied by pieces the row will collapse and earn 100 points. If multiple rows are cleared at a time you will earn bonus points.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
Goodboy Digital
TRY.js
Home - Kenji Saito Archives
GitHub - maroslaw/rainyday.js: Simulating raindrops falling on a window
Google Code Archive - Long-term storage for Google Code Project Hosting.
Sonic
http://tnantoka.net/canvas/glass/