タグ

canvasに関するdaim_htnのブックマーク (5)

  • 「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena

    ASCII.jp:HTML5のcanvasで作る画像フィルター|古籏一浩のJavaScriptラボ こちらの記事をたまたま拝見して、コメント欄もなければトラックバックもできないようなので、どうやって反応を返せばいいのかわからないけれど、もし古籏一浩さんご人が見てくれたらいいなあ、ということで書きます。 全体的にはとても素晴らしい記事なのですが、いくつか言いたいことがあります。 ImageData まず、CanvasRenderingContext2D#createImageData というメソッド。これは知りませんでした。 Opera には window.ImageData というグローバルオブジェクトとして似たものが定義されています。(createImageData と違い、第三引数に配列を渡せるのが特徴ですが) if (window.CanvasRenderingContext2D

    「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena
  • HTML5入門:アニメーションの実装方法3種

    HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる(ただし現在ではWebkit独自の拡張を含む)3つのアニメーション・テクニックの比較(左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ(ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか?))。 詳しくはソース(参照)を見ていただければ

  • IO 9elements

    Responsive bar charts in HTML and CSSBuilding flexible data visualizations for international sites Speed vs. Duration - A use case for mixed unit divisionLearn how to solve the CSS animation challenge of varying speeds across different screen sizes. This post introduces a technique using atan2() and tan() for unitless viewport width calculations and provides practical examples.

    IO 9elements
  • http://typeface.neocracy.org/

  • canvas : 画像の合成方法いろいろ - WebOS Goodies

    使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形(パス or ビットマップ画像)、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています(簡

  • 1