前回の記事では、canvas タグの簡単な紹介と使用例を紹介しましたが、実際には、canvas の使用法は非常に強力で、多くのクールな HTML5アニメーションやゲームが Canvas に基づいて作成されています。そこで、Canvas の基礎を固めるために、Canvas 関連のブログ記事を 2 つ書き続けることにしました。
この記事では、キャンバスに関連するプロパティや使い方を主に紹介します。
色、スタイル、シェーディング
| プロパティ |
説明 |
| fillStyle |
絵画の塗りつぶしに使用される色、グラデーション、またはパターンを設定または返します |
| ストロークスタイル |
を設定または返しますペイントの塗りつぶしに使用される色 ストロークの色、グラデーション、またはパターン |
| shadowColor |
影に使用される色を設定または返します |
| shadowBlur |
影に使用されるぼかしレベルを設定または返します |
| shadowOffsetX |
影の距離を設定または返します シェイプの水平距離を設定または返します |
| shadowOffsetY |
シェイプからの影の垂直距離を設定または返します |
| メソッド |
説明 |
| createLinearGradient() |
線形グラデーションを作成します(キャンバスコンテンツで使用します) |
| createPattern() |
指定された要素を指定された方向に繰り返します |
| createRadialGradient() |
放射状/円形グラデーションを作成しますエント（中古）キャンバスのコンテンツ上) |
| addColorStop() |
グラデーションオブジェクトの色と停止位置を指定します |
線のスタイル
| プロパティ |
説明 |
| lineCap |
設定または線の終端スタイルを返します |
| lineJoin | 2本の線が交差するときに作成される角のタイプを設定または返します |
| lineWidth |
現在の線の幅を設定または返します |
| miterLimit |
設定または戻り最大留め継ぎ長さ |
Rectangle
| メソッド |
説明 |
| rect() |
長方形を作成する |
| fillRect () |
「塗りつぶされた」長方形を描画します |
| ストロークRect() |
四角形を描画(塗りつぶしなし) |
| ClearRect() |
指定された四角形内の指定されたピクセルをクリアします |
パス
| メソッド | 説明 |
fill() | 現在の図面を塗りつぶします(パス) |
ストローク() | 定義されたパスを描画します |
beginPath() | パスを開始するか、現在のパスをリセットします |
moveTo( ) | パスをキャンバスに移動します で点を指定します。線は作成しません |
closePath() | 現在点から始点に戻るパスを作成します |
lineTo() | Add新しい点を作成し、その点からキャンバスの開始点までのパスを作成します 最後に指定した点で線を描きます |
clip() | 元のキャンバスから任意の形状とサイズの領域を切り取ります |
quadraticCurveTo() | 2次ベジェ曲線を作成します |
bezierCurveTo() | 3次ベジェ曲線を作成します |
arc() | 円弧/曲線を作成します(円または部分を作成するため)サークル) |
arcTo() | 2 つの接線の間に円弧/曲線を作成します |
isPointInPath() | 指定された点が現在のパス内にある場合は true を返し、それ以外の場合は false を返します | ズーム 現在の図面をより大きい値に回転します。小さいサイズ
rotate()
現在の図面を回転
| translate() | キャンバス上の(0,0)位置を再マップ
transform() | プロットの現在の変換行列を置き換える |
setTransform() | 現在の変換を単位行列にリセットします。次に、transform() を実行します |
| text |
|
プロパティ | description |
| font | テキストコンテンツの現在のフォントプロパティを設定または返します
text整列
設定または戻るテキストコンテンツ
| textBaseline | の現在の配置 テキストを描画するときに使用される現在のテキストベースラインを設定または返します
| メソッド |
説明 |
fillText() | キャンバス上に「塗りつぶされた」テキストを描画します |
ストロークText() | キャンバス上にテキストを描画します(塗りつぶしなし) |
メジャーテキスト（）は、指定されたテキスト幅widthimagedrawing |
|
method
description
| drawimage（）を含むオブジェクトを再実行します。 |
|
ピクセル操作
| プロパティ | 説明
widthImageDataオブジェクトの幅を返す |
| 高さ
画像を返すデータオブジェクトの高さ
| data | は、指定されたImageDataオブジェクトの画像データを含むオブジェクトを返します
|
|
メソッド | 説明 |
createImageData()
新しい空のImageDataオブジェクトを作成します| |
| getImageData( )
キャンバス上の指定された四角形のピクセルデータをコピーする ImageData オブジェクトを返します
| putImageData() | (指定された ImageData オブジェクトからの) 画像データをキャンバスに戻します
|
画像合成 |
| | プロパティ | 説明
globalAlpha図面の現在のアルファまたは透明度の値を設定または返します |
| globalCompositeOperation
新しい画像を描画する方法を設定または返します既存の画像
| その他のメソッド |
| メソッド | 説明
save()
現在の環境の状態を保存 |
| restore()
以前に保存したパスの状態と属性を返します
| | createEvent() |
|
getContext() |
キャンバスの描画に使用するオブジェクトを取得
|
toDataURL()
| キャンバス要素に描画された画像をエクスポート
|
次のセクションでは例を使用して、各属性とメソッドの具体的な使用法を説明します。 |
以上がHTML5キャンバスの詳細説明(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
