ในบรรดาโครงการที่ฉันเคยทำมาก่อนมีผู้ที่ต้องการฟังก์ชั่นลอตเตอรี โครงการเสร็จสมบูรณ์มาระยะหนึ่งแล้วและไม่มีข้อบกพร่องร้ายแรงดังนั้นฉันจะแบ่งปันกับคุณตอนนี้
ข้อกำหนดการทำงาน
1. แผ่นเสียงควรสวยงามและเอฟเฟกต์การหมุนควรราบรื่น
2. รูปภาพรางวัลจะต้องแสดงบนแผ่นเสียงและรางวัลคือภาพถ่ายและชื่อที่อ่านในพื้นหลัง
3. หลังจากการหมุนภาพเคลื่อนไหวเสร็จสิ้นจะต้องมีพรอมต์ที่สอดคล้องกัน
4. อัลกอริทึมเฉพาะสำหรับรางวัลที่ได้รับนั้นดำเนินการในฐานข้อมูลและส่วนหน้าจะแสดงผลเอฟเฟกต์สุดท้ายเท่านั้น
ประเด็นสำคัญของความรู้
1. การอ้างอิงปลั๊กอิน JQ: Awardrotate ซึ่งใช้เพื่อให้ได้การหมุนที่ชาญฉลาดมากขึ้น (ปลั๊กอินดาวน์โหลด: http://www.jqcool.net/jquery-jqueryrotate.html)
2. ใช้แท็ก Canvas และ HTML5 API ที่สอดคล้องกันเพื่อทำงาน (คู่มือจีนผ้าใบสามารถดูได้ที่ http://javascript.ruanyifeng.com/htmlapi/canvas.html
ข้อความ
อ้างถึงสไตล์แผ่นเสียงขนาดใหญ่
.lunck_draw_wrap {display: block; width: 95%; margin-right: auto;} .lunck_draw_wrap .turnplate {display: block; width: 106%; ตำแหน่ง: สัมพัทธ์;} .lunck_draw_wrap .Turnplate Canvas.Item {ซ้าย: 1px; ตำแหน่ง: ญาติ; ด้านบน: 9px; ความกว้าง: 100%;} .lunck_draw_wrap .Turnplate img.pointer {ความสูง: 37.5%; ซ้าย: 34.6%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 30%; ความกว้าง: 31.5%;}พารามิเตอร์ที่ต้องการสำหรับปลั๊กอินแผ่นเสียง:
var turnplate = {retaraunts: [], // ชื่อรางวัล Turnplate Big Turnplate Lucky: [], // Big Turnplate Content Colors: [], // Big Turnplate Prize Block ซึ่งสอดคล้องกับ Goodsimgarr สีพื้นหลัง: [], // แท็กหน้าภาพ Turnplate ขนาดใหญ่ Insideradius: 65, // รัศมีของวงกลมด้านในของ turnplate startangle ขนาดใหญ่: 0, // เริ่มมุม Brotate: false // false: stop; ture: หมุน};จากพารามิเตอร์เราต้องได้รับชื่อรางวัลที่สอดคล้องกันเนื้อหารางวัลฉลากหน้ารูปภาพรางวัลและข้อมูลอื่น ๆ จากเซิร์ฟเวอร์จากนั้นแสดงแผ่นเสียงขนาดใหญ่
ดังนั้นขั้นตอนแรกของเราคือการส่งคำขอไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลรางวัลที่สอดคล้องกันและสำรวจไปยังพารามิเตอร์อาร์เรย์ที่จำเป็นในการสร้างแผ่นเสียงขนาดใหญ่:
$ .Each (data.list, ฟังก์ชั่น (คีย์, ค่า) {turnplate.restaraunts.push (value.data0); turnplate.lucky.push (value.data1); turnplate.goodsimgarr.push (getLuckyimg + value.data4); turnplate.colors.push ("#5FCBD4");data.list คือข้อมูล JSON ที่ฉันได้รับ:
[{"data0": "รางวัลแรก", "data1": "iphone6s", "data2": "0", "data3": "0", "data4": "201510161406303384.png", data5 ": "data7": "0570-xxxxxx"}, ...... ]เนื่องจากลูกค้าต้องการให้รางวัลเป็น "ขอบคุณสำหรับการเข้าร่วม" รางวัลขั้นต่ำจึงเป็น "รางวัลที่ชนะ" ดังนั้นหลังจากข้ามรางวัลให้ใส่คำอธิบายการแสดงผลของ "รางวัลที่ชนะ":
turnplate.goodsimgarr.push ('../ images/hongbao.png') turnplate.restaraunts.push ("ผู้ชนะ"); turnplate.colors.push ("#5FCBD4"); // หลังจากองค์ประกอบทั้งหมดของหน้าถูกโหลดให้ดำเนินการวิธี DrawRoulettewheel () เพื่อแสดงผลการทำงาน preloadimages (turnplate.goodsimgarr) .done (ฟังก์ชั่น (รูปภาพ) {drawroulettewheel ();});เนื่องจากการโหลดภาพต้องใช้เวลาและการคัดลอกภาพโดยใช้ผืนผ้าใบต้องมีการโหลดภาพก่อนที่จะสามารถวาดได้ดังนั้นฉันจึงใช้ preloadimages เพื่อแสดงผลงานแผ่นเสียงขนาดใหญ่หลังจากโหลดรูปภาพรางวัลทั้งหมด:
// preload function preloadimages (arr) {var newimages = [], loadedimages = 0 var postaction = function () {} // ฟังก์ชัน postaction ได้รับการเพิ่มที่นี่ var arr = (typeof arr! = "object")? ฟังก์ชั่น postaction และผ่านอาร์เรย์ newImages เป็นพารามิเตอร์}} สำหรับ (var i = 0; i <arr.length; i ++) {newImages [i] = newImage () newImages [i] .src = arr [i] newimages [i] return {// วิธีการเสร็จสิ้นของวัตถุเปล่าถูกส่งคืนที่นี่: ฟังก์ชั่น (f) {postaction = f || postaction}}}วาดรหัสแผ่นเสียง:
ฟังก์ชั่น DrawRoulettewheel () {var canvas = document.getElementById ("wheelcanvas"); if (canvas.getContext) {// คำนวณมุมเส้นรอบวงตามจำนวนรางวัล var arc = math.pi /(turnplate.restaraunts.length /2); var ctx = canvas.getContext ("2d"); // ล้างสี่เหลี่ยมในรูปสี่เหลี่ยมผืนผ้าที่กำหนด ctx.clearrect (0,0,422,422); // Strokestyle Property Sets หรือส่งคืนสีการไล่ระดับสีหรือรูปแบบที่ใช้สำหรับ strokes ctx.strokestyle = "RGBA (0,0,0,0)"; // การตั้งค่าคุณสมบัติตัวอักษรหรือส่งคืนแอตทริบิวต์ตัวอักษรปัจจุบันของเนื้อหาข้อความบน Canvas ctx.font = 'Bold 18px Microsoft Yahei'; สำหรับ (var i = 0; i <turnplate.restaraunts.length; i ++) {// คำนวณเรเดียนพัดลมที่วาดขึ้นอยู่กับดัชนีรางวัลปัจจุบัน var angle = turnplate.startangle+i * arc; // วาดสีพัดลมเติมตามพารามิเตอร์รางวัล ctx.fillstyle = turnplate.colors [i]; // เริ่มวาดพัดลม ctx.beginpath (); // arc (x, y, r, มุมเริ่ม, มุมสิ้นสุด, ทิศทางการวาด) วิธีการสร้างอาร์ค/เส้นโค้ง (ใช้เพื่อสร้างวงกลมหรือวงกลมบางส่วน) // วาดวงกลมขนาดใหญ่ ctx.arc (212,212, turnplate.outsideradius, มุม, มุม + อาร์ค, เท็จ); // วาดวงกลมขนาดเล็ก ctx.arc (212,212, turnplate.insideradius, มุม + อาร์ค, มุม, จริง); ctx.stroke (); ctx.fill (); // ล็อคผืนผ้าใบ (เพื่อบันทึกสถานะผ้าใบก่อนหน้า) ctx.save (); // --- วาดการเริ่มต้นรางวัล ---- // ราคาฟอนต์เริ่มต้นสี ctx.fillstyle = "#fff"; var text = turnplate.restaraunts [i]; var lukyname = turnplate.lucky [i]; var line_height = 17; // วิธีการแปล remaps (0,0) ในตำแหน่งผืนผ้าใบ ctx.translate (212 + math.cos (มุม + arc /2)* turnplate.textradius, 212 + math.sin (มุม + arc /2)* turnplate.textradius); // วิธีหมุนหมุนรูปวาดปัจจุบัน ctx.rotate (มุม + arc /2+math.pi /2); // วาดภาพรางวัล var img = newImage (); img.src = turnplate.goodsimgarr [i]; ctx.drawimage (img, -17,35); // เนื่องจากบล็อกสีแผ่นเสียงที่ออกแบบมานั้นมี interleaved สิ่งนี้สามารถบรรลุสีตัวอักษรที่แตกต่างกันในพื้นที่รางวัลที่อยู่ติดกันถ้า (i %2 == 0) {ctx.fillstyle = "#f7452f"; } // วาดตัวอักษรที่พิกัดที่สอดคล้องกัน ctx.filltext (text, -ctx.measuretext (ข้อความ) .width /2,0); // ตั้งค่าตัวอักษร ctx.font = '14px microsoft yahei'; // วาดชื่อรางวัลถ้า (text! = "การชนะรางวัล") {ctx.filltext (lukyname, -ctx.measuretext (lukyname) .width /2,25); } else {ctx.filltext ("youmai coin",-ctx.measureetext ("YouMai Coin"). ความกว้าง /2,25); } // ส่งคืนผืนผ้าใบปัจจุบัน (แทรก) ก่อนที่จะบันทึกก่อนหน้า () สถานะ ctx.restore (); ctx.save (); -มีความคิดเห็นโดยทั่วไปในแต่ละขั้นตอน หากคุณไม่เข้าใจวิธี Canvas คุณสามารถใช้ Baidu หรือสอบถามคู่มือจีนที่ฉันแบ่งปันไว้ข้างต้น
รหัส HTML คือ:
<divclass = "lunck_draw_wrap"> <divclass = "turnplate" style = "พื้นหลังขนาด: 100%100%;"> <canvasclass = "item" id = "wheelcanvas" width = "422px" ความสูง = "422222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 ความสูง: 100%; "src =" ../ images/chouzhang12.png "/> <imgclass =" pointer "src =" ../ images/hianji .png "/> </div>
ภาพการทำซ้ำ:
คลิกเหตุการณ์เพื่อเรียกใช้รหัส:
$ ('. lunck_draw_wrap'). มอบหมาย ("img.pointer", "คลิก", function () {ถ้า (turnplate.brotate) return; turnplate.brotate =! turnplate.brotate; $ .getjson ("../ ajax/lottery.ashx" 1092 คะแนนที่เหลืออยู่ของผู้ใช้ไม่เพียงพอ 1093 hideInput ที่ไม่ได้รับการคัดเลือก ("รหัส", data.code) ถ้า (data.code.toString () == "1090") {iOsalet ("ข้อผิดพลาดการกำหนดค่าระบบ")} elseif } elseif (data.code.toString () == "1092") {iOsalet ("ภายใต้จุดที่เหลือจากผู้ใช้")} elseif (data.code.toString () == "1094") parseint ("#spoint"). html ()); ROTATEFN (0, "ขอแสดงความยินดีกับการชนะรางวัลที่ชนะ!");}}}})});รหัสด้านบนใช้ตรรกะพื้นฐานและยังต้องใช้วิธีการหมุนแผ่นเสียงเพื่อตอบสนองต่อผลลัพธ์ที่ส่งจากเซิร์ฟเวอร์:
// หมุนรายการแผ่นเสียง: ตำแหน่งรางวัล; txt: พรอมต์; var rotatefn = function (item, txt) {// คำนวณเรเดียนที่สอดคล้องกันตามจำนวนของรางวัลที่ส่งมุม var = item *(360/turnplate.restaraunts.length)-(360/(turnplate.restaraunts.length *2)); if (มุม <270) {angles = 270- มุม; } else {angles = 360- มุม +270; } // บังคับให้หยุด Turntable $ ('#wheelcanvas'). stoprotate (); // การคำนวณวิธีการหมุนการตั้งค่าพารามิเตอร์ที่ต้องการและฟังก์ชั่นการโทรกลับ $ ('#wheelcanvas') การหมุน ({// มุมเริ่มมุม: 0, // มุมการหมุน +1800 คือการหมุนอีกสองสามครั้ง if ($ ("#code"). val ()! = "1093") {delayload (gethttpprefix + "graphicdetails.html? lukyid =" + $ ("#code"). val ())}}}); -ตกลงรหัสฟังก์ชั่นหลักได้รับการแบ่งปันและไม่เข้าใจเครื่องมือและวิธีการบางอย่าง คุณสามารถฝากข้อความไว้และฉันจะเพิ่ม
สรุป
Canvas เป็นเอซที่ทรงพลังมากของ HTML5 และสามารถบรรลุเอฟเฟกต์ที่ยอดเยี่ยมมากมาย ฉันหวังว่าบทความนี้จะช่วยเพื่อนบางคนที่เรียนรู้ที่จะใช้ผ้าใบ