ちなみに、微妙に、というのはブラウザ間でのまだレンダリングに差異があるので実用には耐えない、という意味です。
jCanvas(jQueryプラグイン)でCanvasを使ってお絵かき - 対応ブラウザ確認編
ちなみに、微妙に、というのはブラウザ間でのまだレンダリングに差異があるので実用には耐えない、という意味です。
canvasのテスト
HTML5の目玉機能(?)、canvas要素とJavascriptでいろいろサンプル作成中。画面をマウスクリックでパーティクルが吸着するよ。 追記：ちょっと修正 (19:30) Javascriptのソースはこんな感じ。 [sourcecode language=”javascript”] const NUM = 500; //円の数 const WIDTH = 400; //画面の幅 const HEIGHT = 400; //画面の高さ var speedX = new Array(NUM); //X方向のスピードの配列 var speedY = new Array(NUM); //Y方向のスピードの配列 var locX = new Array(NUM); //円の中心位置のX座標の配列 var locY = new Array(NUM); //円の中心位置のY座標の配列 var r
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS
Canvas, File API, Drag&Drop API の組み合わせたデモです。Instagram みたいにフィルターによる画像処理ができます。 【動作確認ブラウザ】 Chrome 8, FireFox 3.6 (Chrome 7 は File API はサポートしていますが、iframe 内では動作しないため、jsdo.it 上では動作しません） 【処理】 1. Drag&Drop API で画像ファイルを取得 2. File API で画像ファイルを DATA URI 形式に変換して、Image オブジェクトで読み込み 3. Image オブジェクトを Canvas の drawImage で描画 4. Canvas の getImageData を利用して、画像のピクセルデータを取り出し 5. ピクセルデータの加工 6. 加工したデータを Canvas の
HTML5 TechTalk#3 & ハンズオンセミナー « HTML5.JP ブログ
html5-developers-jp 主催「HTML5 TechTalk#3 & ハンズオンセミナー」が2010年1月15日(金)と16日(土)に行われました。参加したみなさま、お疲れさまでした。 今回はハッカソンではなくハンズオンにしましたが、如何でしたでしょうか。また 3 時間で説明とコーディングが終わるよう、とても限定したテーマに取りん組んで頂くよう企画しました。初めての企画でしたので、みなさんのご期待にお応えできたかどうか心配ですが、今後もハンズオンのような形で、多くの方に気軽に参加できるような企画を考えていきたいと思いますので、遠慮なくリクエストください。（私に直接リクエスト頂いても構いませんし、html5-developers-jp に投げて頂いても構いません。） 今回の Tech Talk とハンズオンで私が使った仕様を公開しますので、復習にご参考にして頂ければ幸いです。
HTML5 3Days Tech Talk « HTML5.JP ブログ
HTML5 3Days が終わりました。お越し頂いた皆さん、本当にありがとうございました。 実は、html5-developers-jp では初めての Tech Talk だったため、どのようなトピックを取り上げ、そして、どのレベルにあわせた内容にするべきか、とても悩みました。すべての人に満足頂けるた内容ではなかったかもしれません。しかし、少しでも、みなさんのHTML5への取り組みへのモチベーションアップに貢献できたなら、幸甚です。 今回、私は「Canvas チュートリアル」と題して、まだ、Canvas を使ってみたことがない方を対象にして、Canvas の具体的な使い方を紹介しましたが、時間も限られていたため、至らぬ点がたくさんあったと思います。時間があれば、実際のコーディングはどうなるのか、とか、フォールバックをどうるべきかまで、踏み込みたかったのですが、このあたりについては、また、別
HTML5 LogoをCanvasで描いてみた - 風と宇宙とプログラム
かっこ良いんだか悪いんだか、ちょっとわからないけど、HTML5のロゴができたということなので、ちょっと遊んでみた。CCライセンスで提供されている。SVGデータもあるので、中身を見たところ、これならすぐにCavnasでも描けそうだと思い立ったので、帰宅電車の中でコードを書いてみた（はい、お気楽モードです）。 polygonは下記のように頂点の並びpointsと塗りつぶす色を指定しているだけ。 <polygon fill="hsl(13, 77%, 52%)" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 "/> pointsを正規表現でパースするのが実装が簡単。一度に全部分解するのもいいけど、gオプションで有効なlastIndex機構を使って前から順番にパースする。以下のような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
琼中肝几保安有限公司