HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
HTML5 Color Picker (canvas)Script Tutorials - Web Development Tutorials
HTML5 Color Picker (canvas) In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our today’s goal – to create something similar, and even better. In order to make it more unique, there are 5 different colorwheels which you can use. If you are ready – let’s start. It is the very time
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
集え、HTML5な開発者、クリエイター！ HTML5+CSS3+JSとCANVASでゲーム、PhoneGapでハイブリッドアプリ、開発効率アップ（Sass・Jasmine)等勉強会 - akiyoko blog
今週は、HTML5系セミナーに行ってきました。 「集え、HTML5な開発者、クリエイター！ HTML5+CSS3+JSとCANVASでゲーム、PhoneGapでハイブリッドアプリ、開発効率アップ（Sass・Jasmine)等勉強会」（2012.8.29） 場所は渋谷、前回と同じ。 人数は前回より少なかったけど、それにしても狭いなぁ。暑いなぁ。（ ´⌒｀）ゞ HTML5 Canvasでシューティングゲーム ~ 作り方、パフォーマンス、ツール ~ 宗定洋平氏（サイバーエージェント） Slide: http://www.slideshare.net/yoheimunesada/html-canvas-shootingandperformanceup ライブラリを一切使わないHTML5ゲームの作り方を紹介。 初期化処理で、ゲーム開始前に画像をpreloadしておく。 gameMainLoopで、5
Shifty!
Shifty is a tweening engine built in JavaScript. It is designed to fit any number of tweening needs. Features include: Speed - Shifty is optimized for performance. Works well as the base function in a prototype chain. Modular, extensible architecture allows you to use only the Shifty components you need. Small download: Full library (with all extensions) is about 3K minified and gzipped. The cor
Ejecta - Impact
A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS & tvOS e·jec·ta, noun – debris that is ejected during the formation of an impact crater Ejecta is like a Browser without the Browser. It's specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms – only Canvas and Audio elements. This focus makes it fast. JavaScript code is executed directly by a JavaScrip
HTML5 Canvas で学ぶアフィン変換
6. アフィン変換 ざっくりした意味 平行移動を伴う線形変換 ✓ 0 ◆ ✓ ◆✓ ◆ ✓ ◆ x a c x tx = + y0 b d y ty 線形変換 平行移動 0 1 0 10 1 x0 a c tx x @ y0 A = @ b d ty A @ y A 1 0 0 1 1 同次座標系 1つの行列で線形変換と平行移動を表すために次元を1つ増やす 7. Canvas によるアフィン変換 0 0 1 0 10 1 x a c tx x @ y0 A = @ b d ty A @ y A 1 0 0 1 1 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.transform(a, b, c, d, tx, ty); ctx.drawImage(img, 0,
Google Reader – Google
Thank you for stopping by. Google Reader has been discontinued. We want to thank all our loyal fans. We understand you may not agree with this decision, but we hope you'll come to love these alternatives as much as you loved Reader. Sincerely, The Google Reader team Frequently-asked questions What will happen to my Google Reader data? All Google Reader subscription data (eg. lists of people that y
「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave（テックウェーブ）
[読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。 プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。（以下参照） 上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを
CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」:phpspot開発日誌
Saving canvas data to image file This is a small library that lets you easily save a WHATWG canvas element as an imagefile. CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」。 Flashを使わずに、ブラウザ上でお絵かきして、画像に変換できます。 次のように、Canvasに対して１行で変換できます。。 var oCanvas = document.getElementById("thecanvas"); Canvas2Image.saveAsPNG(oCanvas); Canvasの使えないブラウザでは当然、使うことは出来ませんが、描画したものをそのまま画像にする、というのは使いどころがありそうです。
spielzeugz.de/lab
A web page — not an app. For phones and tablets. Launch | Read more... 04-2011
HTML5 / Canvas, スライムみたいにくっつくやつ – キモきもちいい
HTML5, Canvas のキモきもちいいサイト。 http://www.spielzeugz.de/html5/sticky-thing/ 画面上のピンクの物体がブラウザ・ウインドウの端にくっついてスライムみたいにポワンポワン震えます。 spielzeugz.de/lab には他にもステキなDemo がアップされています。 update @abakaneさんに教えてもらったのですが、iPhone, iPad でもグリグリ動きます。 しかも数倍楽しい。 ピンチアウト・インでピンクのふにゃふにゃは大きくなったり小さくなったりします。 傾きも検知しているようです。 iPadだと良くわかります。 JavaScriptだけでできるんですねー
HTML5のcanvasをもっと簡単に操作できる「KineticJS」:phpspot開発日誌
KineticJS - HTML5 Canvas JavaScript Library Framework HTML5のcanvasをもっと簡単に操作できる「KineticJS」 サンプルコード付きでサンプルが紹介されており、インタラクティブなコンテンツをHTML5で作る際に便利に使えそうです マウス位置に応じてフロアが強調表示されるようなデモ その他いろいろなデモがソースコード付きで公開されています。 その他ゲーム等も公開されています。 今後もこうしたライブラリが出てきそうですね 関連エントリ フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://m.jp.techcrunch.com/archives/20121217html5-and-canvas-2d-specs-are-now-feature-complete-first-html-5-1-working-draft-published/
HTML5でスクラッチカードもどき | つるんっと
2012/08/29_(#appsemi)集え、HTML5な開発者、クリエイター！ HTML5+CSS3+JSとCANVASでゲーム、PhoneGapでハイブリッドアプリ、開発効率アップ（Sass・Jasmine)等勉強会
http://visitmix.com/labs/ai2canvas/documentation.html
http://visitmix.com/labs/ai2canvas/
http://visitmix.com/labs/ai2canvas/index.html
Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」:phpspot開発日誌