タグ

canvasとhtml5に関するmio_wembleyのブックマーク (3)

  • canvasを使って知識ゼロから独学してみた「エセ」テクスチャマッピング入門以前編 | 秋葉秀樹個人ブログ

    赤い点をドラッグしてみてください。 あくまで基礎中の基礎なので、もっと詳しい方はこちらのほうがおすすめです。 「2009-02-11 - 最速チュパカブラ研究会」 http://d.hatena.ne.jp/gyuque/20090211#1234364019 ■画像を3D的に遠近感を出すには? 例えば正面を向いている画像が上を向いているように見せるにはどうすればよいでしょう? それは、画像を台形にして上辺が狭くなれば、立体的に上を向いているように見えますよね? 今回はcanvas要素を使ってこういった画像を変形させることにします。 しかし、現在仕様が固まりつつあるcanvasの2Dレンダリング方式では、こういった画像に奥行を与える直接的な機能を持っていません。 つまり長方形のカタチから台形に変形させるのは簡単にできないというべきです。 Flash Playerはvar10からムービークリ

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

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

  • HTML5のCanvasとJavaScriptで電光掲示板のアニメーションを表現する - スタジオ・アルカナ技術ブログ

    はいどうも~。 雪の日は電車遅延でテンションが下がりがちなエンジニアの吉田です。 あたくし、通勤時間が通常だとだいたい1時間45分なのですが、 電車遅延があると、だいたい2時間を越える程度の通勤時間となり、 会社に到着した時点で、既にぐったりしていたり、していなかったり。 そんな中、家から最寄駅に着いて最初にげんなりするキッカケとなる のが、駅にある電光掲示板で誇らしげにチラついていらっしゃる 「【横須賀線 遅延】」というオレンジ色の掲示だったりします。 特に、家から駅までダッシュしたあとにお目にかかれたときなんかは、 凄まじい威力を発揮して頂けますね。洗練された脱力感を体験できる。 今回は、この電光掲示板を見た時にテンションが下がる気分を是非 共有したいと思い、HTML5のCanvasを使って表現してみます。 表現してみた結果、こんな感じのものが出来上がりました。 ※Windows7 +

  • 1