コメント：キャンバスのデフォルトの幅と高さは300と150です。例外を回避するには、幅と高さを追加するためにCSSを使用する代わりに、表示属性を使用して追加することをお勧めします。以下は、キャンバスを使用するための注意事項の簡単な紹介です。興味のある友達はそれを参照できます。それがあなたに役立つことを願っています。
1。CANVAS中国のチュートリアルhttps://developer.mozilla.org/zh-cn/docs/canvas_tutorial2。キャンバスのデフォルトの幅と高さは300と150です。例外を避けるために、幅と高さを追加するためにCSSを使用する代わりに、表示属性を使用して追加することをお勧めします。
3。キャンバスタグ内のキャンバスタグをサポートしていないブラウザを追加する手順
4.ブラウザが次のJSコードを介してキャンバスをサポートするかどうかを判断することもできます。
var canvas = document.getElementById（ 'Tutorial'）;
if（canvas.getContext）{
var ctx = canvas.getContext（ '2d'）;
//ここでコードを描画します
} それ以外 {
// Canvas-Unsupportedコードはこちら
}
5.キャンバスは、1つの基本的な形状、つまり長方形の描画のみをサポートしますが、他の図はキャンバスパスを介して描画できます。
6.長方形を描画するための4つの機能があります：rect、fillrect、strokerect、およびclearrect
7. beginpathの関数は、新しいパスレイヤーを起動するために使用されます。追加されていない場合、元のパスレイヤーに描画することを意味します。次の2つのコードの効果は完全に異なります。最初のコードには2つの赤い線が表示され、2番目のコードには黒い線と赤い線が表示されます。
var ctx = document.getElementById（ 'cvs'）。getContext（ '2d'）;
ctx.beginpath（）;
ctx.moveto（100.5,20.5）;
ctx.lineto（200.5、20.5）;
ctx.stroke（）;
ctx.moveto（100.5,40.5）;
ctx.lineto（200.5、40.5）
ctx.strokestyle = '＃f00';
ctx.stroke（）;
var ctx = document.getElementById（ 'cvs'）。getContext（ '2d'）;
ctx.beginpath（）;
ctx.moveto（100.5,20.5）;
ctx.lineto（200.5、20.5）;
ctx.stroke（）;
ctx.beginpath（）;
ctx.moveto（100.5,40.5）;
ctx.lineto（200.5、40.5）
ctx.strokestyle = '＃f00';
ctx.stroke（）;
8。閉じるためにパスが必要ない場合は、ClosePathを使用できます。充填を使用すると、パスは自動的に閉じられます。もうclosepathを使用する必要はありません。
9.十分な忍耐力がある限り、bezier曲線を使用して任意の図を描くことができます。
10. Firefoxの下には二次曲線にバグがあるため、二次曲線の代わりに立方体曲線を使用できます。
11。画像（PNG、GIF、JPEGなど）をキャンバスに紹介でき、他のキャンバス要素も画像のソースとして使用できます。
12。以下は、画像が画像またはキャンバスオブジェクトである基本的なキャンバス画像描画コードで、xとyはターゲットキャンバスの開始座標です
drawimage（画像、x、y）
次のコードはズームされた画像を表し、幅と高さはズームされたサイズを表します
drawimage（画像、x、y、幅、高さ）
次のコードは、クリッピング画像を表します。最初のパラメーターは他のパラメーターと同じであり、どちらも1つの画像または別のキャンバスへの参照です。他の8つのパラメーターは、それぞれ画像のカットの開始x座標、画像のカットの開始y座標、切断領域の幅、切断領域の高さ、引き出された位置のx座標、描画された位置のy座標、描画された姿の幅、描かれた領域の高さ、描かれた領域のサイズのサイズのサイズの違いはあります。絵の絵。
drawimage（画像、sx、sy、swidth、sheight、dx、dy、dwidth、dheight）
13。Strokestyleはグラフィックアウトラインの色を設定するために使用され、FillStyleは塗りつぶしの色を設定するために使用されます。色は、CSS色の値を表す文字列、勾配オブジェクト、またはパターンオブジェクトです。デフォルトでは、線と塗りつぶしの両方の色は黒です（CSSカラー値＃000000）。
14。画像の透明性は、GlobalAlpha =透明性値またはRGBA色の値で表現できます
15.線幅プロパティは、現在の描画線の厚さを設定します。 1pxライン幅のバグを解くために、+0.5を使用して解決します。
16. LineCAP属性の左端の線の線は、デフォルトのバットを使用します。補助ラインで洗い流されていることに注意してください。中央にはラウンドの効果があり、半径の半円が行の半分の半円がエンドポイントに追加されます。右側には正方形の効果があり、幅が等しい正方形と、エンドポイントにライン幅の半分が追加された高さがあります。
17.ここでは、3つのポリリンも例として使用して、異なるラインジョイン値を設定します。上部は丸い効果で、エッジとコーナーは丸く、円の半径は線幅に等しくなります。中央と底は、それぞれベベルとマイターの効果です。値がマイターの場合、ラインセグメントは、ある時点で交差するまで接続の外側に延びます。拡張効果は、以下に紹介するMiterLimit属性によって制限されています
18.保存および復元メソッドは、キャンバス状態を保存および復元するために使用されますが、どちらもパラメーターを持っていません。 Canvasの状態は、現在の画面に適用されるすべてのスタイルと変形のスナップショットです。キャンバス状態は、ヒープ（スタック）の形で保存されます。保存方法が呼び出されるたびに、現在の状態がヒープに押し込まれて保存されます。復元方法が呼び出されるたびに、以前の保存された状態がヒープからポップアップし、すべての設定が復元されます。
19。変換（1、0、0、1、0、0）パラメーターは、水平スケーリング、水平回転（時計回り）、垂直回転（反時計回り）、垂直スケーリング、水平オフセット、垂直オフセットを表します
SetTransform（1、0、0、1、0、0）は、以前の変換マトリックスをリセットしてから新しいマトリックスを構築することを意味します。パラメーターは上記と同じです
回転（角度）、（1つの半径は1ラジアン、2πr/r =ラジアン、つまり360 =2π、つまり1 =π/180に等しい）
20。アニメーションは実際に常にアートボード（clearRect（））をクリアしてから繰り返します