キャンバス構文の制限を突破し、チェーン構文をサポートさせます_html5 チュートリアル スキル

まず、通常のキャンバス描画構文を見てみましょう:

コードをコピーします

コードは次のとおりです:

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();

私は違いますネイティブの Canvas 構文に満足しています。 ポイントは 2 つあります。1. 各文の前に ctx (つまり、canvas の context2d オブジェクト) が付いています。2. 各関数または属性が 1 行を占めており、スペースの無駄です。

次のような jQuery のチェーン構文にとても感謝しています。

コードをコピー

コードは次のとおりです:

$('#div1').show(300).html(p).delay(3000).slideUp(300).remove();

したがって、キャンバスの描画にもこの構文を使用したいと思います:

コードをコピーします

コードは次のとおりです。

ctx.moveTo(500,0).lineTo(500,500).ストロークスタイル('#f00').ストローク();

1 つの方法は、 context2d オブジェクト、このオブジェクトはすべてのネイティブ context2d メソッドをサポートしますが、チェーンもサポートします。

ただし、コードが多すぎることはできません。そうしないと、誰も使いたくなくなります。

以下は、この「クラス」に XtendCanvas という名前を付けた完全なコード スニペットです (これも X で始まります):

コードをコピーします。

コードは次のとおりです:

// Ten Years Light のチェーン構文をキャンバスにサポートさせます
~function () {var pro = ['save ','restore'、'scale'、'rotate'、'translate'、'transform'、'createLinearGradient'、'createRadialGradient'、'getLineDash'、'clearRect'、'fillRect'、'beginPath'、'closePath'、 'moveTo'、'lineTo'、'quadraticCurveTo'、'bezierCurveTo'、'arcTo'、'rect'、'arc'、'fill'、'ストローク'、'クリップ'、'isPointInPath'、'measureText'、'clearShadow '、'fillText'、'ストロークテキスト'、'ストロークRect'、'drawImage'、'drawImageFromRect'、'putImageData'、'createPattern'、'createImageData'、'getImageData'、'lineWidth'、'ストロークスタイル'、'globalAlpha'、 'fillStyle','font','shadowOffsetX','shadowOffsetY','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] == '関数') {
ctx[p].apply(ctx,args);
} else {
ctx[p] = args '';
}
return fnP;
};
}(p);
}
return new fn;
通常の context2d と同じように使用できますが、チェーン構文がサポートされている点が異なります:

コードをコピー

コードは次のとおりです:var cvs = document.getElementById('cvs');var ctx = XtendCanvas(cvs);

ctx.moveTo(500,0 ).lineTo(500,500) .ストロークスタイル('#f00').ストローク();

この方法では、すべての操作を 1 つの文にまとめることができ、いつでも中断して他のことを行って続行することもできます。

このコードは Canvas の機能拡張ではなく、単にチェーン構文をサポートできるようにするだけです。ただし、コードが少なく、任意の JS ライブラリに埋め込むことができるという利点があります。ここで皆さんからの「推奨事項」を得ることができれば幸いです。

コードには改善する価値のある領域があるはずで、誰もがそれを改善できます。自分たちで。でも、水を飲むときは井戸掘りのことを忘れないでください。最も重要なのはアイデアですよね。アイデアは次のとおりです:
ご覧のとおり、コードの最も長い部分はメソッド名を格納する配列 pro ですが、コア コードは非常に短いです。なぜそのような配列を作成する必要があるのでしょうか?

当初、すべてのネイティブ メソッドを CanvasRenderingContext2D から直接継承したかったのですが、各ブラウザーでこの CanvasRenderingContext2D をトラバースすると、結果が一貫していませんでした。直接継承した場合、Chrome のメソッドを使用して Firefox で実行しようとすると、エラーが報告されます。

そこで、CanvasRenderingContext2D 内の一般的で問題のないメソッドとプロパティ名を抽出しました。固定配列を構築する以外に方法はありません。独自の判断でメソッドを追加できます。

メソッドとプロパティが抽出され、ネイティブ メソッドが新しいオブジェクトに追加されます。メソッドを配置するために fn という空の関数を作成しました。

配列内のこれらの要素は関数と属性の両方を持っているため、ループ内で関数であるかどうかを判断し、関数である場合はパラメーターを使用して実行します。属性である必要があります。この属性にパラメータを割り当てます。

この方法では、キャンバス属性を設定するときに、チェーンを中断する必要がなく、たとえば、

コードをコピーしますコードは次のとおりです:

ctx.ストロークスタイル('#f00')

最後に、 fn を返すキー key です。このトリックは jQuery から学んだもので、チェーン構文をサポートするための鍵です。

この段落では、匿名関数、クロージャ、プロトタイプ、および以前の記事で説明した奇妙な for ループが使用されています。

言うのはとても簡単ですが、皆さんのお役に立てれば幸いです。

コードを書く過程で、Chrome には setStrokeColor や setLineCap などの set で始まる一連の関数があり、それらにパラメータを渡すことで、次のことができることがわかりました。対応するストロークスタイルとラインキャップを置き換えます。属性を待っています。つまり、キャンバスは関数でいっぱいですが、属性がありません。その場合、それが関数であるか属性であるかを判断する必要はありません。しかし、Firefox にはそのようなものはないので、前のアイデアを使用するしかありません。


set 関数も解放しましょう:

コードをコピーコードは次のとおりです:

var bak = ['setTransform','setAlpha', 'setCompositeOperation', 'setLineWidth', 'setLineCap', 'setLineJoin', 'setMiterLimit', 'setLineDash ', 'setShadow','setStrokeColor','setFillColor'];

その使い方は一目で分かりやすいです。前のコードで、いくつかを選択して pro 配列に追加することもできます。

最後に、なぜ私のコードが強調表示されないのか疑問に思います。 。 。最後までご覧になった方は、私も虚しくなってオススメを教えていただければと思います。