2011-01-24 9 views
4

私は現在キャンバスで読んでいますが、単純なCSSオーバーレイ/ JavaScript(+ jquery lib)を使用してたくさんのことができたら、キャンバスを使用することの実際的な利点を見つけるのは難しいです。ゲームにキャンバスを使用することの本当のメリットは何ですか?

これはおそらくキャンバスを使用することの完全な実用性がわからないためです。

このゲームを見て:? http://www.pirateslovedaisies.com/

誰かがどのように、なぜちょうどCSSとは対照的に、キャンバスが使用されている説明するのに役立つだろうか

+0

驚くべきゲーム!私はちょうど1ラウンドをプレーしました:D – vz0

+0

これは役に立つかもしれません - http://visitmix.com/labs/ai2canvas/ – bcm

答えて

6

Thisは4d js/canvasのデモです。私は2dコンテキスト(ブラウザが動作しない場合はhereのビデオです)を試してみました。私はそれをクローム、オペラ、ファイアフォックス、サファリ、ネクサスのいずれかのブラウザでのみテストしました。

外部リソースがロードされていない(つまり、テクスチャとレイトレースされたenvmapが動的に構築されていない)ので、これは単なる自己完結型の4096バイトのHTMLファイルです。

DIVのようなことができますか?

本当に私はあなたがIMOをリンクしたゲームはDIVでもやり遂げることができることに同意します。明らかに、落ちるデイジーローディングシーンでさえ、変換はありません。また、海賊のアクションエリアはまさにサークルです。確かではありませんが、固定された角度でのみ撮影が行われることもあります。 (マップがコンパクトな説明からdinamically作成するか、またはランダムに生成されたかもしれない)一般的な傾斜線とポリゴンの描画

  • キャンバスのために代わりに使用されてきた可能性があります。撮影は...任意の角度で行わ

  • 手続き画像の作成が(例えば、テクスチャまたは特別なピクセル効果)
  • グラデーション、テクスチャマッピングは
  • 一般的な2Dマトリックスは、使用してもちろん

ゲームを変換することができイメージ+ DIVのアプローチはおそらく簡単に作ることができます(たくさんのPhotoshopと単純なxyアニメーション)。

+0

ゲームで使用されているスプライトを簡単に追加したり削除したりする方法を知っていますか?キャンバスにイメージが追加されると、イメージがキャンバスのピクセルの一部になり、DOM要素のような要素にはなりません。 (http://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5) – bcm

+0

画面のようにキャンバスを使用して、すべてのフレームで再ペイントできます。アニメーションを行うには、キャンバスをクリアして新しい位置にあるすべてのオブジェクトを描画することです。 – 6502

+0

これは何が起こっているのかを知るかもしれないと思う - http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/私は100%ではないが。 – bcm

6

大量のHTML要素を作成するのは非常に遅く、メモリを必要とします。キャンバスオブジェクトはグラフィックス操作用に作られており、そのために最適化されています。それ以外に、普通のHTML/CSSでどのように曲線を描くのですか? ;)

+2

一般的に素敵なハッキー 'ボーダー半径 '。しかし、あなたの答えは正しいです。 –

+0

私は ''要素がうまくいくと思います。 – ChaosPandion

+0

@ChaosPandion:SVGだけでなく、* any * html仕様になっていますか? – ThiefMaster

4

<canvas>を使用すると、画面に表示される内容をピクセル単位で制御できます。特定のブラウザCSSまたはDOMの互換性に対処する必要はありません。

また、これは実際には、SDL o DirectDrawを使用して作成されたものと同様に、2D非ブラウザゲームと非常によく似たプログラミングモデルです。

2

Canvasを使用して数時間でa game I wroteになります。タイルのスケーリング、線のアンチエイリアシングが完璧であることに注意してください。これは、ブラウザによってサイズ変更されていた画像タイルでは当てはまりません。

すべての接続を試みるためにタイルをクリックして回転させます。一番上の行のボタンをクリックすると、異なるサイズの新しいボードが表示されます。接続数の異なる新しいボード用のボタンの下の行をクリックします。

ゲームのコンセプトは私のものではなく、実装だけです。

関連する問題