jQueryのようにCanvasで描画、操作·Canvas Query MOONGIFT
Canvas QueryはCanvasをjQueryのように扱えるライブラリです。 HTML5の新機能で知られるCanvasですが、あまり一般的に活用されているとは言いがたい状態です。それは扱いやすさに起因している気がしますが、今回紹介するCanvas Queryを使えばぐっと身近な存在になりそうです。 デモです。色をそれぞれ変えています。 こちらも様々な処理を施しています。 ミサイルの色を変えているデモ。 Canvas QueryはCanvasをjQueryのように扱えるようにするライブラリとなっています。キャンバスを生成し、.fillStyle('#FF0000')のようにしてメソッドを実行します。チェーンメソッドも使えます。多彩に用意されたメソッドを使えば、Canvasを手軽に扱えるようになりそうです。 Canvas QueryはJavaScript製、MIT Licenseのオープ
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アートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
[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]
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
Ajax - データ交換 via PNG : 404 Blog Not Found
2010年08月27日03:30 カテゴリLightweight Languages Ajax - データ交換 via PNG 面白い。 【レポート】JavaScriptとCSSをPNGファイルに含めて圧縮する方法 | エンタープライズ | マイコミジャーナル が、使いどころが限定的すぎる。 Demo 実際に双方向に変換するデモを作ってみた。 復元された文書 ソースはこんな感じ。 /* * You need base64.js. * cf: http://blog.livedoor.jp/dankogai/archives/51067688.html */ img2txt = function(node) { var el = document.createElement("canvas"), ctx = el.getContext("2d"), w = el.width = el.sty
【レポート】JavaScriptとCSSをPNGファイルに含めて圧縮する方法 | エンタープライズ | マイコミジャーナル
Ajaxian IE9がCanvas要素をサポートすることで、これまで広く使われてこなかったテクニックが、もしかしたら注目されることになるかもしれない。Ajaxianに掲載されているWant to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvasという記事で、2008年に公開されたJacob Seidelin氏の記事"Compression using Canvas and PNG-embedded data - Nihilogic"がふたたび取り上げられており、その可能性を示すものとして興味深い。 Compression using Canvas and PNG-embedded dataで紹介されているテクニックは、JavaScriptやCSSをPNG画像データとして利用するというもの。も
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その1 - Webと文字
○|￣|＿ ＜編集中に記事が消えました…サンプルのみです。 サンプル 青空文庫から宮沢賢治、「グスコーブドリの伝記」をサンプルに選びました（参考資料１）。IE、FireFox、Chrome、Safariで見れると思います。マウスホイールで拡大、縮小が出来ます。 サンプル：グスコーブドリの伝記 参考資料 宮沢賢治 グスコーブドリの伝記 追記：2010/5/17,24 縦組 文字を縦に組み上げることを縦組といいます。以下の資料が詳しいです。 日本語組版処理の要件（日本語版） この文書は，CSS，SVGおよびXSL-FOなどの技術で実現が求められる一般的な日本語組版の要件を記述したものです．この文書は，主としてJIS X 4051（日本語組版規則）に基づいていますが，一部，JIS X 4051に記載されていない事項にも言及しています． 日本語組版では文字は正方形の外枠を持ちます。 これはバウンデ
JavaScriptで図形を描くHTML要素「Canvas」の実例
JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入されています。そのため、サポートしているブラウザはSafariとFirefox 1.5以降のGecko1.8ベースのブラウザ、それからOpera9となります。また、この「Canvas」要素は「HTML 5」としても知られるWhatWG Web applications 1.0仕様の一部でもあるそうです。 といろいろ書いても実感がわかないと思うので、いろいろな実例を見てみましょう。 まずは簡単なフレー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GREE Engineering
Site Under Maintenance