Мы часто участвуем в различных рекламных мероприятиях электронной коммерции, такие как покупка в определенную сумму для проведения лотереи, таких как лотерея WeChat, лотерея Taobao, гром, зарабатывая на дисковые мероприятия BAO, и т. Д. Эти розы Сегодня я поделюсь с вами, как использовать HTML5 Canvas для создания функции лотереи диска. Как обычно, давайте сначала посмотрим на визуализации:
Давайте посмотрим на несколько основных API -интерфейсов Canvas:
Все исходные коды следующие:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "UTF-8"> <Title> HTML5 Canvas Disc Lottery Demo Demo </title> <meta name = "viewport" content = "width = width устройства, начальная шкала = 1, пользовательский scale = no">*{width = widsh-width, pain-scale = 1, user-scalable = no ">*{wydsd>*{{wisder>*; 0px; font-size: 16px; font-family: "microsoft yahei";}. Xttblog_box {ширина: 300px; высота: 300px; маржа: 100px auto; позиция: относительно; } .xttblog_box canvas {position: absolute;}#xttblog {фоновый цвет: белый; граница-радий: 100%;}#xttblog01,#xttblog03 {слева: 50px; top: 50px; z-index: 30;}#xttblog02 {слева: 75px; 75px; 20. -Webkit-Transform: Transform 6s; переход: преобразование 6s; -o-transform-Origin: 50% 50%;-MS-трансформ-образный: 50% 50%;-Moz-трансформ-образный 60px; слева: 120px; top: 120px; граница-радий: 100%; положение: абсолют; курсор: указатель; граница: нет; src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script> $ (документ).) Color = ["#626262", "#787878", "RGBA (0,0,0,0,5)", "#DCC722", "White", "#FF4350"]; Работайте усердно ',' Yuan ',' Yuan ',' Gold Moins ',' Yuan ',' Gold Coins '] canvasrun (); Кнопка «Начало рисовать» нельзя нажать $ ('#tupbtn'). ATTR («Отключен», True); else {alert (дорогой, количество розыгрышей было использовано! »); $ ('#XTTBLOG'). CSS ('-MS-Transform', DegValue); $ ('#XTTBLOG'). CSS ('Transform', DegValue); Info [0] + Info1 [0]; 2160 * Rotnum + 1935; else (num == 5) {ogles = 2160 * Info [1] + Info1 [1]; Canvas02 = Document.getElementById ('XTTBLOG02'); CreateCircir (); startAnge+pi*(1/4); Ctx.Stroke (); CTX.BEGINPATH (); Yahei "; ctx.filltext (info1 [i],-30, -95,60); ctx.closepath (); ctx.restore ();}} function initpoint () {// Стрелка указатель ctx1.beginpath (); ctx1.moveto (100,24); ctx1.lineto (110,62); CTX3. Ctx3.fillext («Начало», 80,90,40); цвет [2]; Браузер не поддерживает его. </canvas> <canvas id = "xttblog01"> извините! Браузер не поддерживает его. </canvas> <canvas id = "xttblog03"> извините! Браузер не поддерживает его. </canvas> <canvas id = "xttblog02"> извините! Браузер не поддерживает его. </canvas> <button id = "tupbtn"> </button> </div> <!-изменить всплывающее окно по умолчанию по умолчанию-> <script type = "text/javascript"> window.alert = function (str) {var shield = document.createlement ("div"); shield.id = "щит"; 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 = "<ul style =/" Список-стиль: нет; маржа: 0px; накладка: 0px; ширина: 100%/">/n"; strhtml += "<li style =/" Фон: #626262; Текст-альбом: слева; strhtml+= "<li style =/" фон: #787878; текстовый Align: Center; Font-Size: 12px; Высота: 95px; линейная-высота: 95px; пограничная лета: 1px solid #f9cade; границы-право: 1px solid #f9cade; color: #dcc722/">"+"</li"; strhtml += "<li style =/" фон:#626262; текстовый Align: Center; Font-Weight: Bold; Высота: 30px; линейная-высота: 25px; Граница: 1px solid #f9cade;/"> <input type =/" button/"value =/" ok/"onclick =/" dook ()/"style =/" ширина: 80px; высота: 20px; фон: #626262; цвет: белый; граница: 1px solid white; font-size: 14px; line-height: 20px; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendchild (alertfram); document.body.appendchild (щит); this.dook = function () {alertfram.style.display = "none"; shield.style.display = "none"; } alertfram.focus (); document.body.onselectstart = function () {return false;};} </script> </body> </html>Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.
Оригинальный адрес: http://www.xttblog.com/?p=399