เรามักจะมีส่วนร่วมในกิจกรรมส่งเสริมการขายอีคอมเมิร์ซต่าง ๆ เช่นการซื้อในจำนวนหนึ่งเพื่อดำเนินกิจกรรมลอตเตอรีเช่นลอตเตอรี WeChat, Taobao Lottery, กิจกรรมลอตเตอรีดิสก์ Bao ฯลฯ วันนี้ฉันจะแบ่งปันวิธีการใช้ HTML5 Canvas เพื่อสร้างฟังก์ชั่นการจับฉลากแผ่นดิสก์ ตามปกติมาดูการเรนเดอร์ก่อน:
มาดู API หลักของ Canvas หลายรายการ:
ซอร์สโค้ดทั้งหมดมีดังนี้:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> html5 Canvas Disc Lottery Demo ตัวอย่างการสาธิต </title> <meta name = "viewport" content = "width = device-width 0PX; FONT-SIZE: 16PX; FONT-FAMILY: "Microsoft Yahei";}. XTTBLOG_BOX {WIDTH: 300PX; ความสูง: 300PX; มาร์จิ้น: 100px auto; ตำแหน่ง: ญาติ; } .xttblog_box Canvas {ตำแหน่ง: Absolute;}#xttblog {พื้นหลัง-สี: สีขาว; Border-Radius: 100%;}#xttblog01,#xttblog03 {ซ้าย: 50px; top: 50px; z-index: 30; 20;}#xttblog {-O-transform: transform 6s; -ms-transform: transform 6s; -moz-transform: transform 6s; -webkit-transform: แปลง 6s; การเปลี่ยนแปลง: แปลง 6s; -o-transform-origin: 50% 50%;-MS-transform-origin: 50% 50%;-Moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%; 50%; 60px; ความสูง: 60px; ซ้าย: 120px; ด้านบน: 120px; แนวชายแดน: 100%; ตำแหน่ง: สัมบูรณ์; เคอร์เซอร์: ตัวชี้; ชายแดน: ไม่มี; พื้นหลัง: โปร่งใส; โครงร่าง: ไม่มี; z-index: 40; src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {// การหมุน ["#626262", "#787878", "RGBA (0,0,0,0.5)", "#DCC722", "White", "#FF4350"]; ',' หยวน ',' หยวน ',' เหรียญทอง ',' หยวน ',' เหรียญทอง '] canvasrun (); กระบวนการ "เริ่มต้น" ไม่สามารถคลิก $ ('#tupbtn') attr ("ปิดใช้งาน", จริง); การแจ้งเตือน ("ที่รักการจับรางวัลได้รับการใช้งาน!");}}); $ (#xttblog '). CSS ('-MS-transform ', degvalue); Safari $ ('#xttblog'). css ('transform', degvalue); 1800; {angles = 2160 * rotnum + 1935; } // ความน่าจะเป็นอย่างอื่นถ้า (num == 5) {angles = 2160 * rotnum + 2025; 2115; canvas02 = document.getElementById ('xttblog02'); createCirText (); initpoint (); startangle+math.pi*(1/4); ctx.stroke (); ctx.beginpath (); yahei "; ctx.filltext (info1 [i],-30, -95,60); ctx.closepath (); ctx.restore ();}} ฟังก์ชันเริ่มต้น () {// ลูกศร pointer ctx1.beginpath (); ctx1.moveto (100,24); CTX1.Lineto (110,62); ctx3.fillstyle = สี [5]; CTX3.Filltext ('Start', 80,90,40); สี [2]; เบราว์เซอร์ไม่รองรับ </sanvas> <canvas id = "xttblog01"> ขออภัย! เบราว์เซอร์ไม่รองรับ </sanvas> <canvas id = "xttblog03"> ขออภัย! เบราว์เซอร์ไม่รองรับ </sanvas> <canvas id = "xttblog02"> ขออภัย! เบราว์เซอร์ไม่รองรับ </sanvas> <button id = "tupbtn"> </button> </div> <!-เปลี่ยนหน้าต่างป๊อปอัพเริ่มต้นของระบบ-> <script type = "text/javascript"> window.alert = function (str) {var shield = document.createElement ("div"); shield.id = "Shield"; shield.style.position = "สัมบูรณ์"; shield.style.left = "50%"; shield.style.top = "50%"; shield.style.width = "280px"; shield.style.height = "150px"; shield.style.marginleft = "-140px"; shield.style.margintop = "-110px"; shield.style.zindex = "25"; var alertFram = document.createElement ("div"); AlertFram.id = "AlertFram"; AlertFram.style.position = "Absolute"; AlertFram.style.width = "280px"; AlertFram.style.height = "150px"; AlertFram.style.left = "50%"; AlertFram.style.top = "50%"; AlertFram.style.marginleft = "-140px"; AlertFram.style.margintop = "-110px"; AlertFram.style.TextAlign = "Center"; AlertFram.style.lineHeight = "150px"; AlertFram.style.zindex = "300"; strhtml = "<ul style =/" list-style: none; margin: 0px; padding: 0px; ความกว้าง: 100%/">/n"; strhtml += "<li style =" พื้นหลัง: #626262; text-allign: left; padding-left: 20px; font-size: 14px; font-weight: bold; ความสูง: 25px; เส้นสูง: 25px; ชายแดน: 1px ของแข็ง #f9cade strhtml+= "<li style =" พื้นหลัง: #787878; text-allign: center; font-size: 12px; ความสูง: 95px; สายไฟ: 95px; ขอบซ้าย: 1px ของแข็ง #f9cade; strhtml += "<li style =/" พื้นหลัง:#626262; text-allign: center; font-weight: bold; ความสูง: 30px; line-height: 25px; เส้นขอบ: 1px Solid #f9cade;/"> <อินพุตประเภท =/" ปุ่ม/"value =/" ตกลง/"onclick =/" dook ()/"สไตล์ =/" ความกว้าง: 80px; ความสูง: 20px; พื้นหลัง: #626262; สี: สีขาว; 4px/"/> </li>/n"; strhtml += "</ul>/n"; AlertFram.innerhtml = strhtml; document.body.appendchild (AlertFram); document.body.appendchild (Shield); this.dook = function () {AlertFram.style.display = "ไม่มี"; shield.style.display = "ไม่มี"; } AlertFram.focus (); document.body.onselectstart = function () {return false;};} </script> </body> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน
ที่อยู่เดิม: http://www.xttblog.com/?p=399