Pertama -tama mari kita lihat tata bahasa gambar kanvas normal:
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 ();
Ada dua hal yang saya tidak senang dengan sintaks asli kanvas: 1. Setiap kalimat telah menulis CTX (mis., Objek konteks2d dari kanvas), dan 2. Setiap fungsi atau properti harus menempati satu baris, membuang -buang ruang.
Saya mendapat banyak penghargaan untuk sintaks rantai jQuery, seperti:
$ ('#Div1'). Tampilkan (300) .html (p) .delay (3000) .slideup (300) .remove ();
Jadi, saya juga ingin menggunakan sintaks ini untuk melakukan gambar kanvas:
ctx.moveto (500,0) .lineto (500.500) .strokestyle ('#f00'). Stroke ();
Ada cara untuk mensimulasikan objek Context2D. Objek ini mendukung semua metode Context2D asli, tetapi juga mendukung metode rantai.
Namun, tidak ada terlalu banyak kode, karena akan ada lebih banyak yang suka menggunakannya.
Berikut ini adalah segmen kode lengkap. Saya menamai kelas ini xtendcanvas (dimulai dengan x lagi):
// Biarkan Sintaks Rantai Dukungan Kanvas, dari sepuluh tahun cahaya
~function () {var pro = ['save','restore', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'arcTo', 'rect', 'arc', 'fill', 'stroke', 'clip', 'isPointInPath', 'measureText', 'clearShadow', 'fillText', 'strokeText', 'strokeRect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createMagedata', 'getImagedata', 'linewidth', 'strokestyle', 'globalalpha', 'fillstyle', 'font', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'lineCap', 'linejOnin', 'mIterllimit'];
function xtendcanvas (canvas) {
var ctx = canvas.getContext ('2d'),
fn = function () {},
fnp = fn.prototype;
untuk (var j = 0, p = pro [0]; p; p = pro [j ++]) {
fn.prototype [p] = function (p) {
return function () {
var args = array.prototype.slice.call (argumen);
// console.log (args);
if (typeof ctx [p] == 'function') {
CTX [P] .Apply (CTX, ARGS);
} kalau tidak {
ctx [p] = args+'';
}
mengembalikan FNP;
};
}(P);
}
mengembalikan FN baru;
};
window.xtendCanvas = xtendcanvas;
} ();
Metode penggunaannya sangat sederhana. Lewati objek kanvas dan akan mengembalikan objek yang mirip dengan Context2D. Anda dapat menggunakannya seperti Context2D biasa, tetapi perbedaannya adalah mendukung sintaks rantai:
var cvs = document.geteLementById ('cvs');
var ctx = xtendcanvas (cvs);
ctx.moveto (500,0) .lineto (500.500) .strokestyle ('#f00'). Stroke ();
Dengan cara ini Anda dapat menempatkan semua operasi dalam satu kalimat, dan Anda dapat mengganggu kapan saja, melakukan hal -hal lain, dan kemudian melanjutkan.
Kode ini bukan peningkatan kanvas, itu hanya mendukung sintaks rantai. Tetapi keuntungannya adalah ada sedikit kode dan itu dapat tertanam di perpustakaan JS mana pun. Saya berharap mendapatkan rekomendasi dari Anda di sini
Pasti ada sesuatu yang layak ditingkatkan dalam kode, dan semua orang dapat memperbaikinya sendiri. Tapi - saya tidak lupa untuk menggali sumur ketika saya menggambar air. Saya berharap semua orang mengingat saya. Yang paling penting adalah idenya, bukan? Inilah idenya:
Seperti yang Anda lihat, bagian terpanjang dari kode adalah Array Pro yang menyimpan nama metode, dan kode inti sebenarnya sangat pendek. Mengapa saya ingin membangun array seperti itu?
Awalnya, saya juga ingin mewarisi semua metode asli langsung dari CanvasrenderingContext2D, tetapi setiap browser melintasi CanvasrenderingContext2D, dan hasilnya tidak konsisten. Jika saya mewarisi mereka secara langsung, maka ketika Anda ingin menggunakan metode di Chrome untuk menjalankannya, kesalahan akan dilaporkan.
Jadi saya baru saja mengekstraksi metode umum, tidak obyektif dan nama atribut di CanvasrenderingContext2D. Tidak mungkin, saya hanya dapat membuat array tetap - semua orang dapat memutuskan untuk menambahkan metode Anda ke dalamnya.
Metode dan atribut diekstraksi, dan kemudian metode asli ditambahkan ke objek baru saya. Saya membangun fungsi kosong yang disebut FN dan menempatkan metode saya.
Karena elemen -elemen dalam array ini memiliki fungsi dan atribut, saya dinilai dalam loop apakah itu fungsi. Jika itu adalah fungsi, itu akan dieksekusi dengan parameter; Jika bukan fungsi - maka itu harus menjadi properti, jadi saya tetapkan parameter ke properti ini.
Dengan cara ini, ketika Anda bertemu mengatur atribut Canvas, Anda tidak perlu mengganggu tautan, cukup lewati nilai atribut sebagai parameter, misalnya:
ctx.strokestyle ('#f00')
Akhirnya, kuncinya adalah mengembalikan FN. Trik ini dipelajari dari jQuery dan merupakan kunci untuk sintaks rantai pendukung.
Paragraf ini menggunakan fungsi anonim, penutupan, prototipe, dan aneh untuk loop yang telah saya bicarakan dalam artikel sebelumnya.
Tampaknya cukup mudah untuk dikatakan, tetapi saya sudah memikirkannya untuk waktu yang lama, berharap itu akan berguna bagi semua orang.
Selama proses menulis kode, saya menemukan bahwa Chrome melakukannya dengan sangat baik. Ini memiliki serangkaian fungsi yang dimulai dengan set, seperti SetStrokeColor, SetLinecap dan fungsi lainnya. Dengan memberikan parameter kepada mereka, itu dapat menggantikan atribut yang sesuai seperti strokestyle dan linecap. Dengan kata lain, kanvasnya penuh dengan fungsi dan tidak ada atribut, jadi saya tidak perlu menilai apakah itu fungsi atau atribut. Tapi tidak ada hal seperti itu di Firefox, jadi saya hanya bisa menggunakan ide -ide sebelumnya.
Saya juga akan mengeluarkan serangkaian fungsi set :var bak = ['setTransform', 'setalpha', 'setCompositeOperation', 'setlinewidth', 'setLinecap', 'setlineJoin', 'setMiterLimit', 'setLinedash', 'setShadow', 'setStrokeColor', 'setFillColor'];
Mereka dapat memahami penggunaannya secara sekilas. Anda juga dapat memilih beberapa array Pro yang ditambahkan ke kode sebelumnya.
Akhirnya, saya bertanya -tanya mengapa kode saya tidak disorot. . . Jika Anda melihat akhir, maka beri saya rekomendasi dan biarkan saya sia -sia.