ตัวอย่างในบทความนี้แบ่งปันรหัสเฉพาะของลอตเตอรี Turntable JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. เอฟเฟกต์พื้นฐานทำได้
2. เนื้อหาหลัก
•การใช้แท็กผ้าใบใน HTML5
•ปลั๊กอินการหมุน jQueryRotate.js
3. รหัส HTML หลัก
<body> <div> <div> <canvas id = "wheelcanvas"> </canvas> <img src = "ภาพ/wheel-pointer.png"/> </div> </div> <div> <span id = "tip"> jason </pan>
4. รหัส CSS หลัก
.Content {display: block; ความกว้าง: 95%; ระยะขอบ: 30px auto;}. เนื้อหา. wheel {display: block; ความกว้าง: 100%; ตำแหน่ง: ญาติ; พื้นหลัง-ภาพ: url (../ images/wheel-bg.png); ขนาดพื้นหลัง: 100%100%;}. เนื้อหา. wheel canvas.item {width: 100%;}. เนื้อหา. wheel img.pointer {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 31.5%; ความสูง: 42.5%; ซ้าย: 34.6%; ด้านบน: 23%;}. เคล็ดลับ {text-allign: center; มาร์จิ้น: 20px 0; แบบอักษร: ปกติ 24px 'Microsoft Yahei';}5. รหัส Core JS
/ * * Turntable การแสดงผล * */ฟังก์ชั่น DrawWheelCanvas () {// รับ canvas artboard เทียบเท่ากับเลเยอร์? - var canvas = document.getElementById ("wheelcanvas"); // var canvas = ($ ("#wheelcanvas")). get () [0]; // โปรดทราบว่า jQuery ได้รับวัตถุที่ห่อหุ้มไม่ใช่วัตถุ DOM และสามารถแปลง // คำนวณมุมที่ครอบครองโดยแต่ละบล็อกระบบเรเดียน var baseAngle = math.pi * 2 / (turnwheel.rewardnames.length); // รับบริบท var ctx = canvas.getContext ("2d"); var canvasw = canvas.width; // ความสูงของ artboard var canvash = canvas.height; // ความกว้างของ artboard // ล้างสี่เหลี่ยมในสี่เหลี่ยมผืนผ้า ctx.clearrect (0,0, Canvasw, Canvash); // strokestyle วาด color ctx.strokestyle = "#ffbe04"; // สีแดง // แอตทริบิวต์ตัวอักษรปัจจุบันของเนื้อหาข้อความบน Canvas ctx.font = '16px Microsoft Yahei'; // โปรดทราบว่าตำแหน่งเริ่มต้นจะถูกดึงจากมุม 0 ° นั่นคือทิศทางในแนวนอนไปทางขวา // วาดเนื้อหาเฉพาะสำหรับ (var index = 0; index <turnwheel.rewardnames.length; index ++) {// มุมปัจจุบัน var angle = turnwheel.startangle+index * baseAngle; // เติมสี ctx.fillstyle = turnwheel.colors [index]; // เริ่มวาดเนื้อหา // ------------------------------- ctx.beginpath (); /** วาดอาร์คคล้ายกับ Quartz2d ใน iOS* context.arc (x, y, r, sangle, eangle, ทวนเข็มนาฬิกา); * X: จุดกึ่งกลางของวงกลม x * y: จุดกึ่งกลางของวงกลม x * sangle, eangle: มุมเริ่ม, มุมสิ้นสุด * ทวนเข็มนาฬิกา: วาดทิศทาง, เป็นทางเลือก, เท็จ = ตามเข็มนาฬิกา, จริง = ทวนเข็มนาฬิกา * */ ctx.arc (Canvasw * 0.5, Canvash * 0.5 ctx.arc (Canvasw * 0.5, Canvash * 0.5, Turnwheel.insideradius, Angle + BaseAngle, TRUE); ctx.stroke (); ctx.fill (); // บันทึกสถานะของผืนผ้าใบคล้ายกับสแต็กบริบทกราฟิก คุณสามารถกู้คืนสถานะในภายหลัง (พิกัดจะถูกคืนกลับไปยังปัจจุบัน 0, 0), ctx.save (); /*---- วาดเนื้อหารางวัล --------*/ // ฟอนต์สีแดง ctx.fillstyle = "#e5302f"; var rewname = turnwheel.rewardnames [index]; var line_height = 17; // แปลวิธีการแมป (0,0) ตำแหน่งบนผืนผ้าใบ // context.translate (x, y); // ดูรูปภาพ ppt, var translatex = canvasw * 0.5 + math.cos (มุม + baseAngle / 2) * turnwheel.textradius; var translateey = canvash * 0.5 + math.sin (มุม + baseangle / 2) * turnwheel.textradius; ctx.translate (translatex, translatey); // วิธีการหมุนหมุนรูปวาดปัจจุบันเนื่องจากข้อความเหมาะสำหรับภาคกลางของภาคกลางในแนวตั้งฉาก! // มุม, มุมการหมุนปัจจุบันของพัดลมตัวเอง + baseAngle / 2 มุมของเส้นกึ่งกลางถูกหมุน + มุมแนวตั้ง 90 ° CTX.rotate (มุม + baseAngle / 2 + math.pi / 2); /** รหัสต่อไปนี้แสดงเอฟเฟกต์ที่แตกต่างกันตามประเภทรางวัลและความยาวชื่อรางวัลเช่นตัวอักษรสีและเอฟเฟกต์ภาพ (การเปลี่ยนแปลงโดยเฉพาะตามสถานการณ์จริง) **/ // วิธีการวัด () ของผืนผ้าใบส่งคืนวัตถุที่มีความกว้างของตัวอักษรที่ระบุในพิกเซล // filltext () วิธีการวาดข้อความที่กรอกบนผืนผ้าใบ สีเริ่มต้นของข้อความเป็นสีดำ คุณสมบัติ Fillstyle แสดงข้อความด้วยสี/การไล่ระดับสีอื่น/ * * บริบท filltext (ข้อความ, x, y, maxwidth); * บันทึก! - - y คือค่าด้านล่างของข้อความไม่ใช่ค่าสูงสุด! - - * */if (rewurname.indexof ("m")> 0) {// คำถามว่าแพ็กเก็ตการจราจรของฟิลด์มีอยู่ใน Var rewnames = rewurnname.split ("M"); สำหรับ (var j = 0; j <urwardnames.length; j ++) {ctx.font = (j == 0)? 'Bold 20px Microsoft Yahei': '16px Microsoft Yahei' if (j == 0) {ctx.filltext (rewurnames [j]+"m", -ctx.measureetext (rewnnames [j]+"m"). ความกว้าง / 2, j * line_height); } else {ctx.filltext (rewnnames [j], -ctx.measureetext (rewurnames [j]). ความกว้าง / 2, j * line_height); }}} else ถ้า (rewn, indexof ("m") == -1 && urwardname.length> 6) {// ความยาวของชื่อรางวัลเกินช่วงที่ได้รับรางวัล VAR rewnnames = rewurnname.split ("||"); สำหรับ (var j = 0; j <urwardnames.length; j ++) {ctx.filltext (rewnnames [j], -ctx.measureetext (ชื่อรางวัล [j]). ความกว้าง / 2, j * line_height); }} else {// วาดข้อความสีบนผืนผ้าใบ สีเริ่มต้นของข้อความคือ Black CTX.FillText (rewurnname, -ctx.measureetext (rewurname) .width / 2, 0); } // เพิ่มไอคอนที่สอดคล้องกันถ้า (rewurname.indexof ("qcoin")> 0) {// โปรดทราบว่าคุณต้องรอจนกว่าการโหลด IMG จะเสร็จสมบูรณ์ก่อนที่ IMG สามารถวาด imgqb.onload = function () {ctx.DrawImage (IMGQB, -15,10); - CTX.DrawImage (IMGQB, -15,10); } else ถ้า (rewurname.indexof ("ขอบคุณสำหรับการเข้าร่วม")> = 0) {imgsorry.onload = function () {ctx.drawimage (imgsorry, -15,10); - ctx.drawimage (imgsorry, -15,10); } // restore () ก่อนที่จะกู้คืนสถานะของ artboard ไปยัง state () state ctx.restore (); -ในที่สุด
สิ่งนี้เกือบจะเหมือนกับเทคโนโลยี Quartz2D ใน iOS ...
รหัสรายละเอียด >>>>> คลิกเพื่อดาวน์โหลด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น