テクスチャマッピング入門 射影変換(ホモグラフィ) - jsdo.it - Share JavaScript, HTML5 and CSS
以前、作成したテクスチャマッピング入門では、2つの三角形に分割した方法でした。 テクスチャマッピング入門 今回は、4つの点からホモグラフィ行列(平面射影変換行列)を使った方法になります。 shogo82148氏のCSS3 Transform 3D Testでは、CSSで実現していましたが Canvasを使った方法はどうすれば出来るのか挑戦してみました。 アルゴリズムに関しては、下記サイトを参照してください。 射影変換(ホモグラフィ)について理解してみる ■パラメータ説明 degreea 回転角度 0度の時に回転させる形状を保存します。 0度以外で形状を変形しても元に戻ってしまいます。 本当は、形状を回転途中で変形しても保持して回転出来るようにしたかったんですが、 面倒くさそうだし、今回の目的とは違うので追求するのはやめました。 drawType 画像補間方法 ・Nearest(ニアレストネ
CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する｜javascript｜POPSブログ｜POPS WEB KOUBOU
「Google Webフォント」もよろしいのですが、自分用の好みのWebフォントを作り、複数のWebフォントをサイトにUploadしてCanvasでの使用表示を試してみました。 表示方法としてCSS3、@font-face を使用する方法と、WebFont Loader を使用する方法の2種類にどんな違いがあるのでしょうか、実際にテストしてみます。 CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用するテスト 「Google Webフォント」は便利ですが、今回はWebフォントを作り、複数のWebフォントをサイトにUploadしてCreateJSで使用する方法について調べ、実際にテストして問題があるか考慮してみます。 ▼[ 簡単な説明の目次に進む ] DEMO ▼[ 目次 ] CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用す
canvasで画像処理(ネガポジ変換/グレースケール変換) - Qiita
var data = context.getImageData(x, y, width, height); というものがあり、これによりCanvasのデータ列が取得できます。 data.dataは RGBA順の配列になっており、これを操作してCanvasにputし直すことで画像をなんらかの処理して表示できます。 今回は、下記の画像を使って、ネガポジ変換とグレースケール変換をやってみます。 (ちなみに写真は以前撮らせていただいたCANDY GO!GO!の菜月アイルさんです。) ちなみにサンプルを動かすとき、file:の画像をCanvasに読み込ませると、Canvasが汚染状態となり、getImageData()ができなくなるので、 カレントディレクトリでさっくりとWebサーバを起動させる等を参考にサーバーを起動させて確かめてください。 ネガポジ変換 ネガポジ変換とは、黒だったら白というように
ABCドリームベンチャーズ株式会社 -ABC DREAM VENTURES, Inc.-
私たちの考えOUR MISSION 「夢をはぐくむ、夢をひろげる、夢をつなげる」 開局から65年目を迎え、関西から日本中に笑いと感動を届け続けてきたＡＢＣ 積み上げてきた信頼 グループ各社が有するメディアパワー コンテンツを生み出すヒトやモノ これら私たちの持つチカラで「未来の主役たち＝仲間たち（ベンチャー）」を応援します 「はぐくむ」＝ベンチャーの想いに共感し支援し成長させる 「ひろげる」＝ベンチャーの持つ可能性を大きく発展させる 「つなげる」＝ベンチャーと社内外のリソースを連携させる 「夢をはぐくむ、夢をひろげる、夢をつなげる」 メディア・コンテンツ・エンタテインメントはもちろんのこと 未来を切り拓くあらゆる分野での「未来の主役たち」を求めます 豊かな発想力で世界をあっと驚かせる 素敵な夢をともに語りあえる仲間たちを・・・ いま、私たちは旅立ちます夢を追う冒険へ！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
CreateJS 透過PNG画像の中の部分に陰影処理する｜javascript｜POPSブログ｜POPS WEB KOUBOU