html - 複数のキャンバスを表示するには?

Question

現在、複数のキャンバスを表示できるようにしたいと考えています。私の問題は、Google Chrome で 1 つしか表示できないことです。FF では、最初のキャンバスと影が表示され、2 番目のキャンバスからは影のみが表示されます。

ここに例がありますhttp://jsfiddle.net/ktVsF/

バグ？または悪いコーディング？

Answer 1

この問題は、<canvas>要素の高さと幅の属性を定義していないことが原因です。

HTML 仕様によると、「canvas 要素には、座標空間のサイズを制御する 2 つの属性があります。幅と高さです。これらの属性を指定する場合、有効な負でない整数の値を指定する必要があります。負でない値を解析するための規則数値を取得するには整数を使用する必要があります。属性が欠落している場合、またはその値の解析でエラーが返された場合は、代わりにデフォルト値を使用する必要があります。幅属性のデフォルトは 300 で、高さ属性のデフォルトは 150 です。

したがって、デフォルトの幅と高さは 300 と 150 に設定されており、rect の上、左、下、右の属性のために、キャンバスのサイズから外れています。

より大きな幅と高さに明示的に設定すると、長方形が表示されます。