まず、文法を描く通常のキャンバスを見てみましょう：
ctx.arc（centerx、centery、radius、0、pi*2、true）;
ctx.shadowcolor = 'rgba（0,0,0,0.5）';
ctx.shadowblur = "10";
ctx.fill（）;
ctx.beginpath（）;
ctx.shadowcolor = 'rgba（0,0,0,0）';
CTX.Moveto（CenterX-Radius、Centery）;
ctx.lineto（CenterX -Radius、Centery -50）;
ctx.lineto（centerx+radius、Centery -50）;
ctx.lineto（centerx+radius、centery）;
// ctx.lineto（CenterX-Radius、Centery）;
ctx.fill（）;
ctx.beginpath（）;
ctx.fillstyle = 'rgba（255,0,0,1）';
CTX.ARC（CenterX、Centery-50、radius、0、pi*2、true）;
ctx.fill（）;
キャンバスのネイティブ構文に満足していないことは2つあります。1。各文には、CTX（つまり、キャンバスのコンテキスト2Dオブジェクト）と2。各関数またはプロパティが1行を占有する必要があり、スペースを浪費する必要があります。
jqueryのチェーン構文には、次のような感謝があります。
$（ '＃div1'）。show（300）.html（p）.delay（3000）.slideup（300）.remove（）;
だから、私はまた、この構文を使用してキャンバスの描画を行いたいと思っています。
ctx.moveto（500,0）.lineto（500,500）.strokestyle（ '＃f00'）。stroke（）;
Context2Dオブジェクトをシミュレートする方法があります。このオブジェクトは、すべてのネイティブコンテキスト2Dメソッドをサポートしますが、チェーンズメソッドもサポートします。
ただし、コードを使用するのが好きではないため、あまり多くのコードがありません。
以下は完全なコードセグメントです。私はこのクラスをXtendcanvasと名付けました（再びxから始まります）：
// 10年の光から、Canvasをチェーン構文をサポートさせる
〜function（）{var pro = ['save'、 'restore'、 'scale'、 'rotate'、 'translate'、 'transform'、 'createLinear gradient'、 'createradialgradient'、 'getlinedash'、 'clearrect'、 'fillrect'、 'beginpath'、 'countepath'、 'counto'、 'lineto'、 'lineto'、 'lineto'、 'lineto'、 「beziercurveto」、「arcto」、「rect」、 'arc' '、' fill '、' stroke '、' clip '、' ispointinpath '、' measuretext '、' clearshadow '、' filltext '、' strokeText '、' strokerect '、' drawimage '、' creatimagedata '、' creatimagedata '、 「createimagedata」、「getimagedata」、「linewidth」、 'strokestyle'、 'globalalpha'、 'fellstyle'、 'font'、 'shadow offsetx'、 'shadowfsety'、 'shadowblur'、 'shadowcolor'、 'linecap'、 'linejoin'、 'miterlimit'];
function xtendcanvas（canvas）{
var ctx = canvas.getContext（ '2d'）、
fn = function（）{}、
fnp = fn.prototype;
for（var j = 0、p = pro [0]; p; p = pro [j ++]）{
fn.prototype [p] = function（p）{
return function（）{
var args = array.prototype.slice.call（arguments）;
// console.log（args）;
if（typeof ctx [p] == 'function'）{
ctx [p] .apply（ctx、args）;
} それ以外 {
ctx [p] = args+'';
}
FNPを返します。
};
}（p）;
}
新しいfnを返します。
};
window.xtendcanvas = XtendCanvas;
}（）;
使用方法は非常に簡単です。 Canvasオブジェクトを渡すと、Context2Dと同様のオブジェクトが返されます。通常のContext2Dのように使用できますが、違いはチェーン構文をサポートすることです。
var cvs = document.getElementById（ 'cvs'）;
var ctx = xtendcanvas（cvs）;
ctx.moveto（500,0）.lineto（500,500）.strokestyle（ '＃f00'）。stroke（）;
このようにして、すべての操作を1つの文に配置し、いつでも中断し、他のことをしてから続行できます。
このコードはキャンバスの強化ではなく、単にチェーン構文をサポートします。しかし、利点は、コードがほとんどなく、JSライブラリに埋め込むことができることです。ここであなたから推薦を得たいと思っています
コードには間違いなく改善する価値のあるものがあり、誰もが自分でそれを改善することができます。しかし、私は水を吸うときに井戸を掘ることを忘れないでください。みんなが私を覚えていることを願っています。最も重要なことはアイデアですよね？これがアイデアです：
ご覧のとおり、コードの最も長い部分はメソッド名を保存する配列プロであり、コアコードは実際には非常に短いです。なぜそのような配列を構築したいのですか？
もともと、私はすべてのネイティブメソッドをCanvasRenderingContext2Dから直接継承したいと考えていましたが、各ブラウザはCanvasRenderingContext2Dを通過し、結果は一貫していませんでした。それらを直接継承する場合、Chromeのメソッドを使用して実行する場合は、エラーが報告されます。
そのため、CanvasRenderingContext2Dで一般的で客観的なメソッドと属性名を抽出しました。方法はありません。固定配列しか作成できません。誰もがあなたの方法を追加することを決めることができます。
メソッドと属性が抽出され、新しいオブジェクトにネイティブメソッドが追加されます。 FNという空の関数を作成し、メソッドを配置しました。
配列内のこれらの要素には関数と属性の両方があるため、ループで関数であるかどうかを判断しました。関数の場合、パラメーターで実行されます。それが関数ではない場合 - それはプロパティである必要があるため、このプロパティにパラメーターを割り当てます。
このようにして、Canvas属性の設定に遭遇した場合、リンクを中断する必要はありません。たとえば、属性値をパラメーターとして渡すだけです。
ctx.strokestyle（ '＃f00'）
最後に、鍵はfnを返すことです。このトリックはjQueryから学び、チェーン構文をサポートするための鍵です。
この段落では、匿名の関数、閉鎖、プロトタイプ、および以前の記事で説明したループの奇妙なものを使用しています。
言うのは非常に簡単に思えますが、私はそれが誰にとっても役立つことを望んで、長い間それについて考えてきました。
コードを作成する過程で、Chromeが非常にうまくやっていることがわかりました。 SetStrokeColor、SetLineCap、その他の機能など、セットから始まる一連の関数があります。パラメーターを渡すことにより、StrokestyleやLineCapなどの対応する属性を置き換えることができます。言い換えれば、そのキャンバスには機能がたくさんあり、属性はないため、関数であるか属性であるかを判断する必要はありません。しかし、Firefoxにはそのようなことはないので、以前のアイデアしか使用できません。
また、一連のセット関数を出します。var bak = ['setTransform'、 'setalpha'、 'setcompositeoperation'、 'setlinewidth'、 'setlinecap'、 'setlinejoin'、 'setmiterlimit'、 'setlinedash'、 'setshadow'、 'setstrokecolor'、 'setfillcolor'];
彼らは一目で自分の用途を理解することができます。前のコードに追加されたプロアイレイをいくつか選択することもできます。
最後に、なぜ私のコードが強調されていないのか疑問に思っています。 。 。あなたが終わりを見たら、私に推薦を与えて、私を無駄にさせてください。