html5 canvas - 幅と高さをインラインで定義する必要がありますか？

Question

私はHTML5/Javascriptを使いこなしていて、わからないことがありました。

私はHTML5キャンバスで作業するためのいくつかの基本ルーチンを書こうとしていましたが、drawImage関数が何も描画していないことがわかりました。それが私のコードであると分かり、既存のチュートリアルのコード、つまりHTML5 Canvas Image Tutorialを使用しました。 Javascriptコードを外部に（つまり別のファイルとして）挿入しても、キャンバスに描画された画像は見られませんでした。

そこから、hereという完全なソースがそのままコピーされ、うまくいきました。私はなぜこれが働いたのか把握するために乱暴に始めたが、私はそうしなかった。

この違いは、逐語コードがキャンバスの幅と高さをインラインで定義していることです。私は、HTMLとCSSからスタイリングを分離する方が好きです。私がした場合、コードは機能しました：

<canvas id = "myCanvas" width = "600" height = "400"></canvas> 

外部のCSSスタイルシートでキャンバスの幅と高さを定義しても機能しませんでした。

私の問題の1つは、Javascriptファイルの後にスタイルシートを含めていることでした。それを行う前に、画像onloadハンドラ内のコードが起動していることをalert（）関数で確認した後でも、画像がまったく表示されませんでした。ファイルが含まれる順序を変更した後、私のイメージは表示されましたが、CSSのスタイリングが無視されたかのように、奇妙にスケーリングされました。

これはなぜですか？私は、キャンバスのプロパティがCSSで定義されている順序に関して何か不足していますか？この場合、JavascriptはCSSスタイルを無視するのはなぜですか？関連性がある場合は、ChromeとFirefoxの両方の最新バージョンでこれを試しました。

Answer 1

これは必須ではないですHTML5の仕様によれば、幅と高さ：

canvas要素は、座標空間の大きさを制御するための2つの属性を有しています。これらの属性は、指定された場合、有効な非負整数でなければなりません。非負整数を解析するための規則は、数値を取得するために使用する必要があります。属性がない場合、またはその値を解析するとエラーが返された場合は、代わりにデフォルト値を使用する必要があります。あなたはがあり、それらを書くことを持っていない300のwidth属性のデフォルト値、および高さは150

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Answer 2

はい、属性で記述する必要があります。そうでない場合、キャンバスの実際のサイズは300 x 150になります。 CSSでサイズを変更すると、他の画像と同様にストレッチ/リサイズされます。

Answer 3

にデフォルト値を属性、後でJavaSriptでそれらを書くことができます。

var can = document.getElementById('canvas1'); 
can.width = 600; 
can.height = 400; 

を

途中でデフォルトは300x150です。

キャンバスのサイズを変更する代わりに、キャンバスのサイズを変更してぼやけや欠損を引き起こすため、CSSを使用して幅と高さを決して決して決して使用しないでください。

Answer 4

要素には、幅と高さの属性が2種類あります。

通常、1つはインラインで定義されています（またはそれ以降はJavaScript自体で定義されています）。これは、描画目的でプログラムが使用するキャンバスの実際のピクセルサイズです。

1つはスタイルの幅と高さです。これはCSSで定義できます（ピクセルの幅と高さはできません）。

簡単な答えはノーです。必要に応じてJavaScriptの幅と高さを設定できますが、CSSで割り当てる高さと幅によってキャンバスの表示サイズ（実際のサイズではなく）が変わり、画像が歪むことがあります。