html5キャンバスの共通属性メソッド（はじめに）

この章では、HTML5 キャンバスの一般的な属性メソッド (概要) を紹介します。必要な方は参考にしてください。

最初のタグの紹介言うまでもありません。

2 番目のステップは、canvas の 2D 環境を取得することです (var ctx = CanvasDom.getContext('2d'))。

さて、何か描きたいと思うかもしれません。何かを描画する前に、次のようなことを決定する必要があります。

ctx.fillStyle: これは、塗りつぶしの色を決定するために使用されるプロパティです。 (塗りつぶしの場合、すべて塗りつぶしに関連します)
ctx.ストロークスタイル: これは「ペンのパス」(線と同じように) を決定するために使用されるプロパティです。 (どちらのストロークも線画に関するものです)
ctx.shadow: 描画したグラフィックスの影を設定するプロパティが4つあります(shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY)。あまり使用しないので紹介します。それらを省略します。
ctx.lineWidth: これは、線のスタイルを設定するための 4 つのプロパティ (lineCap、lineJoin、lineWidth、miterLimit) の中で最も一般的に使用され、値は px の文字列です。
ctx.font: text() のフォント サイズとフォント スタイルを設定します。値は「30px」または「30px Microsoft yahei」です。同時にctx.textAlign、ctx.baselineと連携して整列位置、ベースライン位置を設定します。次に、ctx.filltext() または ctx.drawingText() を通じてテキストを描画し、ctx.measureText() は幅や高さなどのテキスト情報を含むオブジェクトを返します。

上記の基本的な属性を理解した後、何かを描画できます。

何かを表示したい場合、おそらく最初にパスを作成し (パスは非表示になります)、次にctx.fill() または ctx.blood を使用してパスを塗りつぶすかトレースします。

ctx.rect(x,y,width,height) または ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise) を使用して、最初にパスを作成し、次に塗りつぶしまたはストロークを作成できます。

もちろん、長方形には、目に見える正方形を直接作成するための ctx.fillRect() と ctx.drawingRect() があります。 (Circle にはこれら 2 つのメソッドがありません)

最後に、ボックス内のすべてのピクセルを消去するために使用される黒板消しゴム ctx.clearRect(x,y,weight,height) を紹介します。

以前のパスからの干渉を防ぐために、ctx.beginPath() を使用して、各描画の前に以前のパスをクリアできます。

上記は Canvas の基本的な使い方ですが、もう少し高度な (yong) (bu) point (shang) について説明します。

長方形スタイルのグラデーション塗りつぶし:

var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillstyle = grd;
ctx.fillRect(x,y,w,h);

この手順は、グラデーション スタイル (塗りつぶしまたは描画可能) を事前定義し、そのスタイルを設定することと同じです。 。

放射状スタイルを設定するための createRadialGradient() と addColorStop もあります。

メディア (写真、ビデオ、その他のキャンバス) の塗りつぶし:

var img = imgDom;
var pat = ctx.createPattern(img,"repeat");

次に、このパットを ctx に与えて塗りつぶしたり、線を描画したりすることができます。

パターンには、repeat (デフォルト)、repeat-x、repeat-y、no-repeatの 4 種類があります。

カスタマイズされたパス:

ctx.moveTo(x,y) を使用してパスの開始点を (x,y) に移動します。 lineTo(x,y)と連携すると、パスをトレースして取得して表示できます。

もちろん、塗りつぶしたいがパスが閉じていない可能性がある場合は、ctx.closePath() を使用してパスを閉じてから塗りつぶすことができます。

キャンバスのカット:

ctx.clip() を使用して、現在閉じているパスに従ってキャンバスをカットします。 カットされたキャンバス部分は操作できません。

ctx.save() を使用して現在の領域を保存し、ctx.restore() を使用して復元できます。

円弧を描く:

ctx.arcTo(x0,y0,x1,y1,radius) で円弧を描き、2 つの点を通る円弧と半径を決定します。をクリックしてパスを取得し、必要に応じてそれを入力またはトレースします。

ポイントがパス内にあるかどうかを判断します:

ctx.isPointInPath(); 何も言うことはなく、ブール値を返します。

ベジェと呼ばれる一種の曲線があります:

まず、ctx.moveTo()を使用して開始点に移動します。

ctx.quadraticCurveTo(c1x,c1y,edx,edy); 始点と制御点と終点を使用したベジェ曲線; c2y 、edx、edy); 2 つの制御点を使用して描画されるベジェ曲線。

グラフィック変換:

ctx.scale(w,h); w>1 で拡大すると幅が拡大し、h で拡大すると高さが拡大します。

ctx.rotate(r); r はラジアン単位です (20 度: 20*Math.PI/180)。時計回りに。

ctx.translate(x,y)はキャンバス上の(0,0)の位置を設定し、(x,y)は(0,0)の現在位置になります。

ctx.transform(a,b,c,d,e,f); は、それぞれ水平スケーリング、水平傾斜、垂直傾斜、垂直スケーリング、水平変位、垂直変位です。このプロパティは重畳され、次のグラフィックに有効になります。

ctx.setTransform(a,b,c,d,e,f); 上記と同様に、このプロパティは変換を再定義し、次のグラフィックに対して有効になります。

drawImage():

ctx.drawImage(dom,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8); dom に加えて、最大 8 つのパラメータを渡すことができます。2 つは画像 (元のサイズ) の位置決め用、4 つはサイズに応じた画像の位置決め用、8 つはカット後の画像の位置決め用です (それぞれ: カット開始 x、y、カット サイズ w 、ｈ、位置決め位置ｘ、ｙ、サイズｗ、ｈ）。

GlobalAipha 属性: グローバル透明度を設定します。 （塗装済みのものには影響ありません）。

globalCompositeOperation 属性は、「source-over」と「destination-over」を含む前後の重複領域の重なり順を設定します。どちらが上で、どちらが下になります。

以上がhtml5キャンバスの共通属性メソッド（はじめに）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。