Di antara proyek yang telah saya lakukan sebelumnya, ada orang yang membutuhkan fungsi turntable lotre. Proyek ini telah selesai untuk sementara waktu dan tidak ada bug yang serius, jadi saya akan membaginya dengan Anda sekarang.
Persyaratan fungsional
1. Turntable harus indah dan efek rotasi harus halus.
2. Gambar hadiah perlu ditampilkan di meja putar, dan hadiahnya adalah foto dan nama yang dibaca di latar belakang.
3. Setelah animasi rotasi selesai, harus ada petunjuk yang sesuai.
4. Algoritma spesifik untuk hadiah yang diperoleh dioperasikan dalam database, dan front-end hanya menyediakan tampilan efek akhir.
Poin -poin penting dari pengetahuan
1. Plug-in JQ direferensikan: AwardRotate, yang digunakan untuk mencapai rotasi yang lebih cerdas (unduhan plugin: http://www.jqcool.net/jquery-jqueryrotate.html).
2. Gunakan tag Canvas dan HTML5 API yang sesuai untuk beroperasi. (Canvas Chinese Manual dapat dilihat di http://javascript.ruanyifeng.com/htmlapi/canvas.html
teks
Mengutip gaya turntable besar
.lunck_draw_wrap {display: block; lebar: 95%; margin-right: auto;} .lunck_draw_wrap .turnplate {display: blok; lebar: 106%; Posisi: relatif;} .lunck_draw_wrap .turnplate canvas.item {kiri: 1px; Posisi: kerabat; Atas: 9px; Lebar: 100%;} .lunck_draw_wrap .turnplate img.pointer {tinggi: 37.5%; Kiri: 34,6%; Posisi: Absolute; Atas: 30%; Lebar: 31,5%;}Parameter yang diperlukan untuk plug-in turntable:
var turnplate ={ restaraunts:[],//Big turnplate prize name lucky:[],//Big turnplate content colors:[],//Big turnplate prize block corresponds to background color goodsimgArr:[],//Big turnplate picture page tag outsideRadius:175,//Radius of the outer circle of the large turnplate textRadius:140,//Distance of the prize position from the center of the Circle Insideradius: 65, // jari -jari lingkaran dalam turnplate besar startangle: 0, // Mulai sudut brotate: false // false: stop; ture: rotate};Dari parameter, kita perlu mendapatkan nama hadiah yang sesuai, konten hadiah, label halaman gambar hadiah dan informasi lainnya dari server, dan kemudian membuat meja putar yang besar.
Jadi langkah pertama kami adalah mengirim permintaan ke server untuk mendapatkan informasi hadiah yang sesuai dan melintasi parameter array yang diperlukan untuk menghasilkan meja putar yang besar:
$ .each (data.list, function (kunci, nilai) {turnplate.restaraunts.push (value.data0); turnplate.lucky.push (value.data1); turnplate.goodsimgarr (getLuckyimg + value.data4); if (kunci %2 == 0) turnple.cus. turnplate.colors.push ("#5fcbd4");data.list adalah data JSON yang saya dapatkan:
[{"Data0": "Hadiah Pertama", "Data1": "iPhone6s", "Data2": "0", "Data3": "0", "Data4": "201510161406303384.png", "Data5": "Kota XXXX Teknologi" Data6 ":" xxxxxxxxxxx, "Kota Kota," Data, "Data," Data, "Data," Data, "Data," Data, "Data," Data, "Data," Data, "Data," Data, "Data," Data, "Data," Data, "Data7": "0570-xxxxxx"}, ......]Karena pelanggan mewajibkan hadiah untuk menjadi "terima kasih telah berpartisipasi", hadiah minimum juga "hadiah pemenang". Jadi setelah melintasi hadiah, masukkan deskripsi rendering "Hadiah Menang":
turnplate.goodsimgarr.push ('../ gambar/hongbao.png') turnplate.restaraunts.push ("pemenang"); turnplate.colors.push ("#5fcbd4"); // Setelah semua elemen halaman dimuat, jalankan metode drawroulettewheel () untuk membuat turntable preloadimages (turnplate.goodsimgarr) .done (function (gambar) {drawroulettewheel ();});Karena pemuatan gambar membutuhkan waktu, dan menyalin gambar menggunakan kanvas membutuhkan gambar untuk dimuat sebelum dapat ditarik, jadi saya menggunakan preloadimages untuk membuat turntable yang besar setelah semua gambar hadiah dimuat:
// fungsi preload preloadImages (arr) {var newImages = [], loadedImages = 0 var postaction = function () {} // Fungsi postaction telah ditambahkan di sini var arr = (typeOf arr! = "Objek")? [ARR]: Fungsi ARR ImageLoadPost () {loadEdimages ++ if (loadedimages == arr. dan lulus array baru sebagai parameter}} untuk (var i = 0; i <arr.length; i ++) {newImages [i] = newImage () newImages [i] .src = arr [i] newImages [i] .onload = function () {imageloadpost ()} newImages [i]. return {// Metode yang selesai dari objek kosong dikembalikan di sini: function (f) {Postaction = f || postaction}}}Gambar kode turntable:
function drawroulettewheel () {var canvas = document.geteLementById ("wheelcanvas"); if (canvas.getContext) {// Hitung sudut keliling berdasarkan jumlah hadiah var arc = math.pi /(turnplate.restaraunts.length /2); var ctx = canvas.getContext ("2d"); // Bersihkan persegi panjang dalam persegi panjang ctx.clearrect (0,0,422,422); // Strokestyle Properti set atau mengembalikan warna, gradien atau pola yang digunakan untuk stroke ctx.strokestyle = "rgba (0,0,0,0)"; // Pengaturan Properti Font atau mengembalikan atribut font saat ini dari konten teks pada Canvas ctx.font = 'tebal 18px Microsoft Yahei'; untuk (var i = 0; i <turnplate.Restaraunts.length; i ++) {// Hitung kipas yang ditarik Radian berdasarkan indeks hadiah saat ini var sudut = turnplate.startangle+i * arc; // Gambarlah warna pengisian kipas sesuai dengan parameter hadiah ctx.fillstyle = turnplate.colors [i]; // Mulai menggambar kipas ctx.beginpath (); // busur (x, y, r, sudut mulai, sudut ujung, arah gambar) menciptakan busur/kurva (digunakan untuk membuat lingkaran atau lingkaran parsial) // Gambar lingkaran besar ctx.arc (212.212, turnplate.outsideradius, sudut, sudut + busur, palsu); // Gambar lingkaran kecil ctx.arc (212.212, turnplate.insideradius, sudut + busur, sudut, true); ctx.stroke (); ctx.fill (); // Kunci kanvas (untuk menyimpan keadaan kanvas sebelumnya) ctx.save (); // --- Gambar Hadiah Mulai ---- // Harga Font Warna Font Ctx.Fillstyle = "#fff"; var text = turnplate.restaraunts [i]; var lukyname = turnplate.lucky [i]; var line_height = 17; // menerjemahkan metode pemasangan (0,0) pada posisi kanvas ctx.translate (212 + math.cos (sudut + busur /2)* turnplate.textradius, 212 + math.sin (angle + arc /2)* turnplate.textradius); // Metode putar memutar gambar saat ini ctx.rotate (sudut + arc /2+math.pi /2); // Gambarlah gambar hadiah var img = newImage (); img.src = turnplate.goodsimgarr [i]; ctx.drawimage (img, -17,35); // Karena blok warna turntable yang dirancang diselingi, ini dapat mencapai warna font yang berbeda di area hadiah yang berdekatan jika (i %2 == 0) {ctx.fillstyle = "#f7452f"; } // Gambarkan font pada koordinat ctx.filltext (teks, -ctx.measureText (teks) .width /2,0); // atur font ctx.font = '14px Microsoft Yahei'; // Gambarlah nama hadiah jika (teks! = "Winning Prize") {ctx.filltext (lukyname, -ctx.measureText (lukyname) .width /2,25); } else {ctx.fillText ("YoMai Coin",-ctx.measureText ("koin YoMai"). Lebar /2.25); } // Kembalikan kanvas saat ini (masukkan) sebelum status save () sebelumnya ctx.restore (); ctx.save (); // ------------------------------}}}Pada dasarnya ada komentar di setiap langkah. Jika Anda tidak memahami metode kanvas, Anda dapat menggunakan Baidu atau menanyakan manual Cina yang saya bagikan di atas.
Kode HTML adalah:
<divclass="lunck_draw_wrap"> <divclass="turnplate"style=" background-size:100%100%;"> <canvasclass="item"id="wheelcanvas"width="422px"height="422px"></canvas> <imgclass="pointer"style="top:0px; left:0px; width:100%; Tinggi: 100%; "src =" ../ gambar/chouzhang12.png "/> <imgclass =" pointer "src =" ../ gambar/hianji .png "/> </div>
Gambar reproduksi:
Klik acara untuk menjalankan kode:
$ ('. Lunck_draw_wrap'). Delegate ("img.pointer", "click", function () {if (turnplate.brotate) return; turnplate.brotate =! turnplate.brotate; $ .getjson ("../ Ajax/lottery.ashx", "", function (data) {/Ajax/lottery.ashx "," ", function (data) {/ajax/lottery.ashx", "", function (Data) {" abnormal, 1092 Poin yang tersisa tidak cukup, 1093 hideInput yang tidak disinari ("kode", data.code) if (data.code.toString () == "1090") {iosalet ("kesalahan konfigurasi")} {data. } elseif (data.code.toString () == "1092") {iosalet ("Di bawah titik-titik yang tersisa dari pengguna")} elseif (data.code.tostring () == "1094") {iosalet ("over of draw per hari")} else {var varpoint = 0; ParseInt ("#spoint"). html ()); rotateFn (0, "Selamat untuk memenangkan hadiah yang menang!");Kode di atas mengimplementasikan logika dasar dan juga memerlukan metode untuk memutar turntable untuk menanggapi hasil yang dikirim dari server:
// Putar item turntable: posisi hadiah; txt: prompt; var rotateFn = function (item, txt) {// Hitung radian yang sesuai berdasarkan jumlah hadiah yang ditransmisikan var sudut = item *(360/turnplate.Restaraunts.length)-(360/(turnplate.Restaraunts.length *2)); if (sudut <270) {sudut = 270- sudut; } else {angles = 360- sudut +270; } // Hentikan turntable $ ('#wheelcanvas'). StopRotate (); // Menghitung metode rotasi, mengatur parameter yang diperlukan dan fungsi callback $ ('#wheelcanvas'). Rotate ({// Mulai Sudut Sudut: 0, // Sudut Rotasi +1800 adalah untuk mengubah beberapa belokan lagi. if ($ ("#code"). Val ()! = "1093") {DelayLoad (getHttppRefix + "graphicdetails.html? lukyid =" + $ ("#code"). Val ())}}}); };OK, kode fungsi utama telah dibagikan, dan beberapa alat dan metode tidak dipahami. Anda dapat meninggalkan pesan dan saya akan menambahkannya.
Meringkaskan
Kanvas adalah kartu as yang sangat kuat dari HTML5 dan dapat mencapai banyak efek cemerlang. Saya harap artikel ini dapat membantu beberapa teman yang belajar menggunakan kanvas.