canvas初心者によくある質問
856 ワード
1.なぜdisplay:blockを設定するのですか?画像文字などのinline要素はデフォルトで親要素のbaselineと整列しますが、baselineは親レベルの底辺と一定の距離(この距離はfont-size,font-familyに関連しています)を持っています.canvasもそうです.この問題を回避するためにcanvasをブロックレベル要素に設定するのが一般的です.
2.cssでcanvasの幅を設定し、canvas要素のwidth、heightプロパティを設定するのはなぜですか?両者の違いは何ですか.css設定canvasの幅はcss設定の他のラベルと同じです.canvas要素のwidth、height属性を設定するのはcanvasの横方向、縦方向の画素数を設定することです
たとえば、css設定canvas幅はそれぞれ200 pxと50 px設定canvas要素のwidth、height属性はそれぞれ400と50です.私たちはrect方法でcanvas全体に色を埋め尽くします.
3.canvas要素のwidth、height属性を設定するには単位を持たない必要があります.例えば、200、文字列、例えば「200」を使用してcanvasを使用することもできます.clientWidth、canvas.ClientHeightは要素の幅を取得し、{width,height}=canvasを使用することも提案できる.getBoundingClientRect()の2つのメソッドは、単位を持たずに数値を取得します.
2.cssでcanvasの幅を設定し、canvas要素のwidth、heightプロパティを設定するのはなぜですか?両者の違いは何ですか.css設定canvasの幅はcss設定の他のラベルと同じです.canvas要素のwidth、height属性を設定するのはcanvasの横方向、縦方向の画素数を設定することです
たとえば、css設定canvas幅はそれぞれ200 pxと50 px設定canvas要素のwidth、height属性はそれぞれ400と50です.私たちはrect方法でcanvas全体に色を埋め尽くします.
canvas.getContext('2d').rect(0, 0, 400, 50)ではなくcanvas.getContext('2d').rect(0, 0, 200, 50)で、最終的にブラウザで見たのは、200*50のブロックのオンラインプレゼンテーションです.3.canvas要素のwidth、height属性を設定するには単位を持たない必要があります.例えば、200、文字列、例えば「200」を使用してcanvasを使用することもできます.clientWidth、canvas.ClientHeightは要素の幅を取得し、{width,height}=canvasを使用することも提案できる.getBoundingClientRect()の2つのメソッドは、単位を持たずに数値を取得します.