タグ

canvasに関するkitanowのブックマーク (3)

  • Canvas APIの基礎

    もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer(9以降)に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向

    Canvas APIの基礎
  • Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)

    はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ

  • Canvas+Javascriptで動かす物理エンジンBox2DJS | idealoops

    html5で作られたサイトを見るうちに個人的に心を奪われた、Canvas要素での物理表現。それを実現するライブラリ「Box2DJS」について紹介したいと思います。 きっかけ。Webページ上で自然にモノが動くってすごい! きっとみんな好きなyugop.com。 Flashで作られたサイトですが、この実験的な感じと簡潔なデザインの組み合わせのセンスの良さは僕の中で永遠のヒーロー。 ところが、最近になりyugop.comと同じくらい、ちょっと別の角度から衝撃を受けたのが株式会社コンテンツのサイト。 HTML5で制作された国内企業サイト20から現状の制作状況を知る!!やWeb Designingでも取り上げられていましたが、「なんじゃこりゃ!?」って感じです。 実験的な要素が盛りだくさんですが、コーポレートサイトとしてもしっかり機能しつつ、htmlで書かれているところがスゴイ! 「めっちゃ遊んでる

  • 1