キャンバスは、いくつかのシンプルなAPIを通じて、キャンバスに変化する効果をもたらすことができます。
絵画の場合、キャンバスは生地と同等であり、コンテキストはブラシと同等です。
1。線を描きますMoveto(x0、y0):電流ブラシ(ICTX)をこの位置(x0、y0)に移動します。
Lineto(x1、y1):現在の位置(x0、y0)から(x1、y1)から直線を描画します。
beginpath():パスを開くか、現在のパスをリセットします。
closepath():現在のポイントからパスの出発点に戻ります。つまり、前のbeginpath、回避、パスの位置に戻ります。
stroke():描画。この関数は写真を描くために追加する必要があるため、これは最後に配置する必要があります。
var icanvas.getelementbyid(icanvas)= ictx.beginpath(0,0,150(300,150); (); iCTX.Stroke();
効果:
ここでは、クロークパスがストローク関数の後ろに配置されている場合、閉じた前に描画されるため、閉じたラインに描かれないため、左側の直線が描画されないことに注意してください。
2。ラインスタイルLinecap:ラインエンドポイントスタイル、バット、ランド、スクエア。
LineJoin:2本の線がミターに設定されている場合、ターニングポイントスタイルは、マイテルメットを介して変曲点の接合部で最大長を設定することもできます。
MITERLIMET:堆積物の長さがMiterLimitの値を超えると、コーナーはBevel Typeのラインジョインに表示されます。
LineWidth:線幅
Strokestyle:ラインカラー、グラデーション(定義された勾配オブジェクト)、モード。 Context.Strokesty =#333;
var icanvas.getelementbyid(icanvas)= iching.beginpath; 、10);再び黒い斜め、合計3行。 ICTX.STROKESTYLE = 000000;
Begin PathとClosepathは、2つのクローズを閉じて閉じたパスを開始するために使用することはほとんどありません。
3。曲線を描画しますarc(x、y、radius、startangle、endangle、anticlockwise):描画曲線、半径は曲線の半径、startangle、indangle arting engl and ending angle、arc(math.pi/180)*角度、角度値を描く方向を描画しますアイテム
arcto(x1、y1、x2、y2、radius):2つのカットラインの前に曲線を描きます。
ICTX.BEGINPATH(20,20); / ARCS ICTX.LINETO(150,120);
水平線の開始点と水平エンドポイントの接続を、水平線の設定のエンドポイントに描きます。
四分位数(x1、y1、x2、y2):2つのベッセル曲線。 (x1、y1)制御点の座標、(x2、y2)エンドポイントの座標
Beziercurveto(x1、y1、x2、y2、x、y):3つのベッセル曲線。 (x1、y1)コントロールポイント1、(x2、y2)コントロールポイント2座標(x、y)エンドポイントの座標。
ベッセル曲線は、非常に滑らかな曲線を描くときに非常に便利です。
4.長方形と詰め物を描きますrect():rectangleを作成します。
filect(x、y、幅、高さ):満たされた長方形を描画:(x、y)出発点、幅、高さ長方幅高さの高さの高さの高さの高さ
strokerect():長方形のワイヤフレームを描きます
ClearRect():長方形をクリアします。
ICTX.FILLSTYLE =#0000FF;5。ペン属性
塗りつぶし:色、勾配、またはパターン(パッテン)を設定します。
ストロークスタイル:ブラシの色、勾配、またはパターン
6。影を描きますShadowcolor:Shadow Yanse
Shadowblur:ぼやけたレベル
Shadofoffsetx:影の水平距離
ShadowOffsety:影の垂直距離
ICTX.SHADOWBLUR = 20;7。グラデーションを描画します
CreateLinearGradyient(x1、y1、x2、y2):線形勾配を描画します。
Createradialgradient(x1、y1、r1、x2、y2、r2):radial radial勾配:(x1、y1)は勾配の出発点であり、R1は半径、(x2、y2)は勾配のエンドポイント、R2です。エンドポイント半径です。
両方のグレードを使用する必要があります
addColorsStop(停止、色)は勾配プロセスを設定するように設定されており、値は0.0〜1.0です。
var grd = createlinearadient(0,170,0)。 //ここでは、fillStyle(20,150,100)を渡すために使用されます(200,150,150,100);8。背景に記入します
createpattern(画像、繰り返し|リピートx |リピート|繰り返し|ノーレピート):画像は画像オブジェクトであり、後続のパラメーターを使用して画像の繰り返し方法を設定します。
9。その他の関連APIfill():現在のパスを入力します。
ispointInpath():ICTX.ISPOINTINPATH(x、y);
キャンバスを削除します:キャンバスの幅と高さを取得します。
キャンバスの幅を変更します:icanvas.width = '200';
Globalpha:透明性を設定します。透明度が異なる場合は、2番目を描画する前に再セットします。
Todataurl:icanvas.todataurl(タイプ、エンコロップ)、この関数は画像で画像64のURIを返し、タイプは画像/jpeg、画像/webpなどの画像タイプを設定しますIS 0〜1の数値は、画像/jpeg、画像/webpの画質を設定し、他の形式を入力するために使用されます。このパラメーターは無効です。
10。宝物Clip():キャンバスからの任意の形状とサイズのキャンバス、そしてすべての図面は仕立て領域に限定されます。この方法は、通常、長方形の丸い形などのパスで使用されます。
ICTX.ARC(100,100,50、(Math.Pi/180)(Math.Pi/180)、true); ;
それでも外部キャンバスを操作する場合は、save()関数を使用して削減する前に保存し、restore()関数を使用して、切断後に以前に保存された状態を復元しますが、中央の操作は消えません。
上記は、この記事のすべての内容です。