最後の時間は、私たちは色と透明の調整とキャンバスを学び、今日は線形、グラデーション、パターンと影の知識を学びます。
最初は、キャンバスオブジェクト内の線形が、我々は線のスタイルを制御するプロパティのセットを使用することができます。
線幅=値
このlinecap =タイプ
たlineJoin =タイプ
miterLimitの値=
私はシンプルな導入よりもはるかに良いを説明するために例を使用して、これは私のいつものスタイルだと思います。コード上で起動してみましょう：
関数draw（）{
VaRのCTX =のdocument.getElementById（ 'キャンバス'）のgetContext（ '2D'）。
{（; iは10 <I ++がVAR I = 0）のための
ctx.lineWidth = 1 + I。
ctx.beginPath（）;
ctx.moveTo（5 + iは14,5を*）。
ctx.lineTo（5 +私は14140を*）。
ctx.stroke（）;
}
}
この例では、様々な厚さの10本のラインを描き、それを私たちは、このプロパティを使用して自分自身をよく理解しましょう：線幅。
線幅は、現在のドロー線の太さを設定し、プロパティの値が正の数でなければならない場合、デフォルトは1.0です。
これは、両側の所定の厚さの中心へのパスの線幅を指します。換言すれば、描画の幅の各半分の両側にパス。カンバス座標と特別な注意を払うときに、正確な水平または垂直線を得ることが所望される場合、画素は、直接対応しないからです。
左端とすべての奇数ラインの幅の例としては、位置決めパスので、この問題は発生しません。
正確なラインを実現したい、行は理解を引き出す方法でなければなりません。以下に示す、グリッド座標グリッドキャンバスによって表され、各セルは、スクリーン上の画素に対応します。最初の図において、矩形に充填（2,1）、（5,5）、境界画素の全領域がちょうどこのようにして得られた矩形の縁に当たるは、鋭いエッジを有することができます。私の絵は、教育のウェブサイトから取得した、と私はしたくない、と私は殺された場合、あなたが策定学ぶことができない許します。。。
あなたは（3,5）に（3,1）からのラインを描きたい場合は、幅が1.0行である、あなたは、2番目の結果と同じ数値を取得します。実際の充填（濃い青）画素のみの半分の経路の両側に延びています。画素のこの半分は、結果は全体のハーフトーン領域（水色と濃い青色部分）を充填する実際のストロークの色の色であり、それらの画素が部分的にのみ斜線ことを意味し、同様にレンダリングされます。1.0の例の線幅が不正確になり、このためです。
この問題を解決するには、パス上で非常に正確に制御することがあります。1.0幅のライン（1 3.5）への描画線として、半画素の経路の両側に延びているであろうことを知る（3.5、5）第三の画像に - 1つだけ正確に充填、エッジ画素境界を落ちます1.0線の幅。
これらの偶数幅ラインに対して、各辺の画素数は、あなたはなく、ピクセル単位で（例えばから（3,1）（3,5）へと）画素間でパスをしたい、整数であります中間点。また、そうでない場合、Yは、座標グリッド線の垂直線の例では、同一のハーフピクセルレンダリングエンドポイントが存在するであろうことに留意されたいです。
少し痛みがピクセルグリッドとパスの場所との間の関係にスケーラブルな2Dグラフィックスが、早期の注意の処理を開始しますが、あなたは、グラフィックスがスケーリングことを確認することができますまたは任意の他の変形がうまくルックスを維持することができる：幅拡大2倍に垂直1.0は、2.0の明確な幅となり、それが上に表示されなければならないことの位置に表示されます。
このlinecap：まあ、我々は次の属性を学び続け、行を着色の問題を把握します。
プロパティこのlinecapは、表示セグメントエンドポイントの外観を決定します。お尻、円形や四角：それは、次の3つのものであってもよいです。デフォルトはお尻です。
ノー例、なし学習。さあ、コード上で私たちをみましょう：
関数draw（）{
VaRのCTX =のdocument.getElementById（ 'キャンバス'）のgetContext（ '2D'）。
VaRのこのlinecap = [ 'バット'、 'ラウンド'、 '正方形']。
//ガイドを描きます
ctx.strokeStyle = '＃の09F';
ctx.beginPath（）;
ctx.moveTo（10,10）。
ctx.lineTo（140,10）。
ctx.moveTo（10140）。
ctx.lineTo（140140）。
ctx.stroke（）;
// 線を描く
ctx.strokeStyle =「黒」。
{（; iはlineCap.lengthを<I ++がVAR I = 0）のための
ctx.lineWidth = 15。
ctx.lineCap =このlinecap [I]。
ctx.beginPath（）;
ctx.moveTo（25 + iは50,10の*）。
ctx.lineTo（25 + iは50140を*）。
ctx.stroke（）;
}
}
、私たちはコードを解析します。前半は、誰もが異なる値を割り当て、この属性の違いを見てみましょうするために、二つの補助線を引きます。次にアイテムこのlinecap及び11個の割り当てのすべてのパラメータを介してループするループの後半。補助線への出発点とフォーカス秋の三行。
デフォルトのお尻と左のライン。ガイドと同一平面であることに留意されたいです。半径の半分線幅プラス半円を持って最後の真ん中ラウンド。右は、同じ幅とボックスの幅の半分の添加高端の正方形です。
今の私たちは、ほぼ直線を持っていますが、新たな問題が再び出てきました。どのように我々は二つの場所にそれを結ぶ線を描画する必要がありますか？丸みを帯びた円弧または直角？それとも何か他のもの？脳卒中は、メソッドへのパスで満たされていますか？もちろんそうではありません。のは、この新しいプロパティを学びましょう：たlineJoin
それへのコードの最初の部分は、コードの多くは、ものの知識に基づいています：
関数draw（）{
VaRのCTX =のdocument.getElementById（ 'キャンバス'）のgetContext（ '2D'）。
VaRのたlineJoin = [ 'ラウンド'、 'ベベル'、 'マイター']。
ctx.lineWidth = 10。
{（; iはlineJoin.lengthを<I ++がVAR I = 0）のための
ctx.lineJoin =たlineJoin [I]。
ctx.beginPath（）;
ctx.moveTo（-5,5 +私は40 *）。
ctx.lineTo（35,45 +私は40 *）。
ctx.lineTo（75,5 +私は40 *）。
ctx.lineTo（115,45 +私は40 *）。
ctx.lineTo（155,5 +私は40 *）。
ctx.stroke（）;
}
}
たlineJoinプロパティの値は、2つを結ぶ線で表示されたグラフの外観を決定します。ラウンド、ベベルとマイター：これは3つのものであってもよいです。デフォルトでは、マイターです。
この例では、3つの接続が異なる値たlineJoin提供されている定義します。第1の効果は、角が丸められた円弧接地され、円形です。第2の効果は、ベベル角度は平坦になります。第三は、線分が一点で交わるまで延在する、マイタの効果で説明する効果を制限miterLimitのプロパティを拡張します。
miterLimitのは、それをしているのですか？milterの効果はちょうどのこぎりのように、線分が外側に延びる収束します。多分ラインとの間に臨界角、角度はそう遠くない遭遇することができますの2のうち、大良ければ。しかし、角度が比較的小さい場合、それは少しトラブルが、コミットメントの長さが指数関数的に上昇する拡張しました。。。
miterLimitの属性が拡張への取り付けの交点の最大距離を設定するために使用される交点の距離がこの値より大きい場合、効果ベベルに接続なることがあります。
バーコードに古いルール：
関数draw（）{
VaRのCTX =のdocument.getElementById（ 'キャンバス'）のgetContext（ '2D'）。
//クリアキャンバス
ctx.clearRect（0,0,150,150）。
//ガイドを描きます
ctx.strokeStyle = '＃の09F';
ctx.lineWidth = 2。
ctx.strokeRect（-5,50,160,50）。
//設定する線スタイル
ctx.strokeStyle = '＃000';
ctx.lineWidth = 10。
//設定しmiterLimitの値
ctx.miterLimit = 10。
// 線を描く
ctx.beginPath（）;
ctx.moveTo（0,100）。
用（i = 0; iは24 <; iは++）{
DYた= I％2 == 0？25 -25;
ctx.lineTo（Math.pow（I、1.5）* 2.75 + DY）。
}
ctx.stroke（）;
falseを返します。
}
私は小さな変化のポイントを作られたこの例では、オリジナルのケースは、入力ラベルmiterLimitのプロパティによって入力され、私は、学習を促進死に直接書き込むためにここにいる、理解を願っています。
私たちは、私はこの単純なのプロパティを直接理解があるだろうと信じて、自分自身の変化を見て、この値を変更することができます。
今日は、まずここで私たちは緩やかな学習になります次回それを勉強します、我々は〜あなたの次の時間を参照してください
ます。https：//www.cnblogs.com/xiao-yao/archive/2012/04/13/2445965.htmlで再現