Kami sering berpartisipasi dalam berbagai kegiatan promosi e-commerce, seperti pembelian ke jumlah tertentu untuk melakukan kegiatan lotre, seperti lotere WeChat, lotere taobao, aktivitas lotere disk BAO yang menghasilkan uang, dll. Raffle ini sebagian dibuat oleh kanvas HTML5. Hari ini saya akan berbagi dengan Anda cara menggunakan kanvas HTML5 untuk membuat fungsi undian disk. Seperti biasa, mari kita lihat rendering terlebih dahulu:
Mari kita lihat beberapa API utama Canvas:
Semua kode sumber adalah sebagai berikut:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> html5 Canvas Disc Lotre Demo Demo </itement> <meta name = "viewport" content = "width = device-width, skala awal = 1, no-scale = no" no "no": no "no" pay*{scale-scale = no; 0px; font-size: 16px; font-family: "microsoft yahei";}. Xttblog_box {width: 300px; tinggi: 300px; margin: 100px auto; posisi: relatif; } .xtttblog_box canvas {position: absolute;}#xttblog {latar belakang-color: white; border-radius: 100%;}#xttblog01,#xtttblog03 {kiri: 50px; top: 50px; z-index: 30;}#{xtttblog02 {75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; 75px; Top; Top; 20;}#xttblog {-o-transform: transform 6s; -MS-transform: transform 6s; -moz-transform: transform 6s; -webkit-transform: transformasi 6s; transisi: transformasi 6s; -o-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-Webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; 60px; kiri: 120px; atas: 120px; perbatasan-radius: 100%; posisi: absolute; kursor: pointer; perbatasan: tidak ada; latar belakang: transparan; garis besar: tidak ada; z-indeks: 40;} </style> <script type = "text/javascript" src = "http://cdn.bootcss.com/jQuery/1.11.3/jquery.min.js"> </script> <script> $ (dokumen) .eady (function () {// rotasi sudut vari; var color = "#626262", "#787878", "RGBA (0,0,0,0,5)", "#dcc722", "putih", "#ff4350"]; ['Masih bekerja keras', 'yuan', 'yuan', 'koin emas', 'yuan', 'koin emas'] canvasrun (); Turntable Proses "Mulai Draw" tidak dapat diklik $ ('#tupbtn'). ATTR ("Disabled", true); // Jumlah rotasi menambahkan satu rotnum = rotnum + 1; } {alert (Dear, jumlah undian telah digunakan! "); $ (#xttblog '). CSS ('-MS-Transform ', DegValue); $ (#xttblog '). CSS (' Transform ', DegValue); = Info [] + info1 [0]; sudut = 2160 * Rotnum + 1935; } // Probabilitas Lainnya if (num == 5) {sudut = 2160 * Rotnum + 2025; 2115; canvas02 = document.getElementById ('xttblog02'); CreateCircle (); Startangle+Math.pi*(1/4); ctx.stroke (); ctx.beginpath (); Yahei "; ctx.filltext (info1 [i],-30, -95,60); ctx.closepath (); ctx.Restore ();}} function initpoint () {// panah ctx1.beginpath (); ctx1.moveto (100.1; ctx1.lineto (110,62); ctx3.fillstyle = warna [5]; ctx3.filltext (start ', 80,90,40); warna [2]; Browser tidak mendukungnya. </ Canvas> <canvas id = "xttblog01"> Maaf! Browser tidak mendukungnya. </ Canvas> <canvas id = "xttblog03"> Maaf! Browser tidak mendukungnya. </ Canvas> <canvas id = "xttblog02"> Maaf! Browser tidak mendukungnya. </ Canvas> <tombol id = "tupbtn"> </button> </div> <!-Ubah jendela pop-up default sistem-> <script type = "text/javascript"> window.alert = function (str) {var shield = document.createElement ("div"); shield.id = "shield"; shield.style.position = "absolute"; 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 = "<ular style =/" Daftar-gaya: tidak ada; margin: 0px; padding: 0px; lebar: 100%/">/n"; strhtml += "<Li style =/" latar belakang: #626262; Teks-Align: kiri; padding-left: 20px; font-size: 14px; font-weight: tebal; tinggi: 25px; line-height: 25px; Border: 1px solid #f9cade; color: white/"> [MEMPIRIAN: 25PX; BORDER: 1PX SOLID #f9cade; Color: White/"> [WINING: 25PX; BORDER: 1PX SOLID #f9cade; color: white/"> [BERBATAS strhtml+= "<Li style =/" latar belakang: #787878; teks-align: tengah; font-size: 12px; tinggi: 95px; line-height: 95px; border-left: 1px solid #f9cade; border-right: 1px solid #f9cade; color: #dcc72222222222222222; "" "" "" "" "" "" ""; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; ";"; "Li> Li> Li> Li> Li> Li>" Li> Li> "Li> Li> Li>" Li/Li/Li/Li. " strhtml += "<Li style =/" latar belakang:#626262; Teks-Align: tengah; font-weight: tebal; tinggi: 30px; garis-tinggi: 25px; Border: 1px Solid #f9cade;/"> <input type =/" Button/"value =/" OK/"OnClick =/" dook ()/"style =/" Width: 80px; Tinggi: 20px; latar belakang: #626262; Warna: putih; border: 1px solid white; font-SIZE: 14px; line-height-height-height; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendChild (alertfram); Document.Body.AppendChild (SHIELD); this.dook = function () {alertfram.style.display = "none"; shield.style.display = "none"; } alertfram.focus (); document.body.onselectStart = function () {return false;};} </script> </body> </html>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.
Alamat asli: http://www.xttblog.com/?p=399