<canvas> は、スクリプト (通常は js) を使用して描画できる HTML 要素です。
< Canvas > WebKit は Apple によって最初に導入され、Mac OS X のダッシュボードと Safari で使用されました
現在、すべての主要なブラウザがこれをサポートしています (IE9 以降、それより前のバージョンでサポートするには Explorer Canvas を導入する必要があります)
1. 描画を開始します (コンテキストのレンダリング)<canvas> 要素は、表示するコンテンツの描画と処理にレンダリング コンテキスト CanvasRenderContext2D を使用できる固定サイズのキャンバスを作成します。
Canvas 上に描画するには、まず CanvasRenderContext2D2d レンダリング コンテキストを取得する必要があります。 (これは 2D のことを指します。WebGL の話ではありません)
const Canvas = document.getElementById('mycanvas'); const ctx = Canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);例
2. CanvasRenderContext2D のプロパティ:コンテキストのプロパティを設定することで、描画のスタイルを指定できます。
すべてのプロパティは次のとおりです。
| 財産 | 導入 |
|---|---|
| キャンバス | キャンバス要素 |
| 塗りつぶしスタイル | パスを埋めるために使用される現在の色、モード、またはグラデーション |
| フォント | フォントスタイル |
| グローバルアルファ | キャンバス上に描画されるコンテンツの不透明度を指定します |
| グローバル複合操作 | 色をキャンバス上にすでにある色と組み合わせる方法を指定します (合成) |
| ラインキャップ | 線の端の描画方法を指定します |
| ラインダッシュオフセット | ダッシュオフセットを設定する |
| ライン参加 | 2 本の線の接続方法を指定する |
| 線幅 | ブラシ(線画)操作の線幅を指定します |
| マイターリミット | lineJoin 属性が miter の場合、この属性は線幅に対する対角結合の長さの最大比率を指定します。 |
| 影ぼかし | ぼかし効果レベル |
| 影の色 | 影の色 |
| シャドウオフセットX | 影の水平オフセット距離 |
| シャドウオフセットY | 影の垂直オフセット距離 |
| ストロークスタイル | ブラシ (描画) パスの色、モード、グラデーション |
| テキスト整列 | テキストの配置 |
| テキストベースライン | テキストの垂直方向の配置 |
Canvasの幅と高さは、属性値widthとheightを使用して指定する必要があります。
指定しない場合、キャンバスのデフォルトのサイズは 300×150 です。
スタイルで指定される幅と高さは、キャンバス要素の表示サイズのみであり、描画環境のサイズではありません。
Canvas {width: 1000px;height: 600px;}<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = red;ctx.fillRect(10, 10, 100、100);幅と高さの例スタイルが同じサイズに設定されているのに、表示がまったく異なるのはなぜですか?
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。