タグ

canvasに関するgx9901dxのブックマーク (4)

  • Image/Canvas/ImageDataのマップ描画性能を検証

    地形チップを並べてマップを描いたりスクロールを行う場合、地形グラフィックは「一枚の画像」として持たせたいところです。ただ、その場合は描画の際に「一枚の画像から描画しようとする地形チップの部分を切り出して描画する」必要があり、これが性能上のボトルネックになるのでは、という気がしないでもありません。 そこで、今回は40*40ピクセルの地形チップを12*12並べた表示画面に対して以下の描画処理を行い、描画処理の時間を計測してみることにしました。「全体の一部」を描画する場合は「個別の画像をそのまま」描画する場合の性能、そしてCanvas、Image、ImageDataという描画対象の種別による性能の差を比べてみましょう。 8*8チップの全体画像を320*320ピクセルのImageとして保持しdrawImage()で一部を描画 8*8チップの全体画像を320*320ピクセルのCanvasとして保持し

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

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

  • iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal

    iOS6によるアップデート まず最初に、iOS6において、Safari上のWebアプリから簡単にカメラ&フォトライブラリの写真にアクセスできるようになりました。いままでカメラにアクセスするにはPhoneGapなり何なりでネイティブ化する必要があったので、写真共有サービスなどにはかなり有用なアップデートです。 File APIHTML Media Capture への対応 HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。 type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。 (略) ファイルを選択したあとは何ができるか... action による Multipart post Ajax (XMLHttpRequest 2) を使用したファイル送信(プログレス表示にも対応) File AP

    iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
  • 「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave(テックウェーブ)

    [読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。 プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。(以下参照) 上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを

    「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave(テックウェーブ)
  • 1