Среди проектов, которые я делал раньше, есть те, кому нужна функция лотереи. Проект был завершен на некоторое время, и серьезных ошибок нет, поэтому я поделюсь им с вами сейчас.
Функциональные требования
1. Поворотный стол должен быть красивым, а эффект вращения должен быть гладким.
2. Призовой картинки необходимо отобразить на проигрывательном столе, а приз - это фото и имя, читаемая в фоновом режиме.
3. После завершения анимации вращения, должны быть соответствующие подсказки.
4. Конкретный алгоритм для полученного приза управляется в базе данных, а передняя часть обеспечивает только окончательный отображение эффекта.
Ключевые моменты знаний
1. Плагин JQ упоминается: Awardrotate, который используется для достижения более интеллектуальной ротации (плагин загрузка: http://www.jqcool.net/jquery-jqueryrotate.html).
2. Используйте тег Canvas и соответствующий API HTML5 для работы. (Руководство по китайскому языку можно просмотреть по адресу 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 = {restaraunts: [], // Большое название призового призового приза Счастливого: [], // Цвета контента с большим поворотом: [], // Блок большой призовой пластины соответствует фоновому цвету Goodsimgarr: [], // Страница «Большой размер». Инсайдердиус: 65, // радиус внутреннего круга большого запуска поворота: 0, // Угол начала: False // false: stop; ture: watate};Из параметров нам необходимо получить соответствующее имя приза, содержимое приза, ярлык страницы с изображениями призовых и другую информацию с сервера, а затем отобразить большой проигрыватель.
Таким образом, наш первый шаг - отправить запрос на сервер для получения соответствующей информации о призе и пройти его к параметрам массива, необходимых для создания большого поворотного стола:
$. turnplate.colors.push ("#5fcbd4");Data.List - это данные JSON, которые я получил:
[{«Data0»: «Первый приз», «Data1»: «iPhone6s», «Data2»: «0», «Data3»: «0», «Data4»: «201510161406303384.png», «Data5»: «XXXX сеть», «Data6»: «XXXX, район Kecheng, Quzhou City, zejiiang, zejiing, zhejiiang, zhejiiang, zhejiiang, zhejiang, zhejiiang, zhejiang, zhejiang, zhejiiang, zhejiang, zhejian. "Data7": "0570-XXXXXX"}, ......]Поскольку клиент требует, чтобы приз был «спасибо за участие», минимальный приз также «выигрышный приз». Итак, после прохождения приза вставьте описание «победного приза»:
turnplate.goodsimgarr.push ('../ Images/hongbao.png') turnplate.restaraunts.push («Победитель»); turnplate.colors.push ("#5fcbd4"); // после того, как все элементы страницы загружаются, выполните метод DrawRouletTewheel (), чтобы отобразить поворотные предварительные изделия (turnplate.goodsimgarr) .done (function (image) {drawrouletthewheel ();});Поскольку загрузка изображения требует времени, и копирование изображения с помощью холста требует загрузки изображения, прежде чем его можно было нарисовать, поэтому я использовал предварительные погрузки, чтобы представить большой поворотный стол после загрузки всех призовых изображений:
// Preloadimages function function (arr) {var newimages = [], loadedimages = 0 var postaction = function () {} // функция посторонней работы была добавлена здесь var arr = (typeof arr! = "Object")? Функция пост и передайте массив Newimages как параметры}} для (var i = 0; i <arr.length; i ++) {newimages [i] = newimage () newimages [i] .src = arr [i] newimages [i] .onload = function () {imageLoadPost ()} newimage [i] .oner = fund () {imageLoadpost ()} newimage [i] .oner = {imageLoadPost ()} newimage [i]. return {// метод выполненного пустого объекта возвращается здесь: function (f) {postaction = f || Посткакция}}}Нарисуйте код поворотного стола:
функция drawRoulettewheel () {var canvas = document.getElementbyId ("whelcanvas"); if (canvas.getContext) {// Рассчитайте угол окружности на основе количества призов var arc = math.pi /(turnplate.restaraunts.length /2); var ctx = canvas.getContext ("2d"); // очистить прямоугольник в данном прямоугольнике CTX.Clearrect (0,0,422,422); // Свойства Strokestyle Устанавливает или возвращает цвет, градиент или рисунок, используемый для Strokes ctx.strokestyle = "rgba (0,0,0,0,0)"; // Настройки свойства шрифта или вернуть текущий атрибут шрифта текстового содержимого на Canvas ctx.font = 'Bold 18px Microsoft Yahei'; for (var i = 0; i <turnplate.restaraunts.length; i ++) {// Рассчитайте нарисованный вентилятор Radian на основе текущего индекса приза var angle = turnplate.startangle+i * arc; // Нарисуйте цвет заливки вентилятора в соответствии с параметрами призов ctx.fillstyle = turnplate.colors [i]; // Начало рисовать вентилятор ctx.beginpath (); // Метод дуги (x, y, r, угол начала, угол конечного угла, направление рисования) Создает дугу/кривую (используется для создания кружков или частичных кругов) // Нарисуйте большой круг ctx.arc (212,212, turnplate.outsideradius, угол, угол + дуга, false); // нарисовать маленький круг 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) в положении Canvas ctx.translate (212 + math.cos (angle + arc /2)* turnplate.textradius, 212 + math.sin (angle + arc /2)* turnplate.textradius); // повернуть метод поворачивает текущее чертеж CTX.ROTATE (угол + ARC /2+MATH.PI /2); // Нарисуйте призовой картинку var img = newimage (); img.src = turnplate.goodsimgarr [i]; ctx.drawimage (IMG, -17,35); // Поскольку спроектированные цветовые блоки поворота чередуются, это может достичь разных цветов шрифта в соседних призовых областях, если (i %2 == 0) {ctx.fillstyle = "#f7452f"; } // Нарисуйте шрифт в соответствующей координате ctx.filltext (text, -ctx.measuretext (text) .width /2,0); // Установить шрифт ctx.font = '14px microsoft yahei'; // рисовать имя приза if (text! = "Выигрышный приз") {ctx.filltext (lukyname, -ctx.measuretext (lukyname) .width /2,25); } else {ctx.filltext ("youmai coin",-ctx.measuretext ("youmai coin"). Ширина /2,25); } // возвращать текущий холст (вставьте) до предыдущего сохранения () состояния ctx.restore (); ctx.save (); // ------------------------------}}}Есть в основном комментарии на каждом шаге. Если вы не понимаете метод Canvas, вы можете использовать Baidu или запросить китайское руководство, которое я поделился выше.
HTML -код:
<divclass = "lunck_draw_wrap"> <divclass = "turnplate" style = "background-size: 100%100%;"> <canvasclass = "item" id = "whilecanvas" width = "422px" height = "422px"> </canvas> <imgclass = "point style =" top: 0px: 0px; Высота: 100%; "src =" ../ Images/Chouzhang12.png "/> <imgclass =" pointer "src =" ../ Images/hianji .png "/> </div>
Изображение воспроизведения:
Нажмите на событие, чтобы выполнить код:
$ ('. lunck_draw_wrap'). Delegate ("img.pointer", "click", function () {if (turnplate.brotate) return; turnplate.brotate =! turnplate.brotate; $ .getJson ("../ ajax/lottery.ashx", ", Function (Data) {// 109 System System. abnormal, 1092 User remaining points are insufficient, 1093 Unwinned hideInput("code",data.code) if(data.code.toString()=="1090"){ iosalet("system configuration error") }elseif(data.code.toString()=="1091"){ iosalet("User not logged in or user data exception") } elseif (data.code.toString () == "1092") {iosalet ("Под оставшимися точками от пользователя")} elseif (data.code.tostring () == "1094") {iosalet ("над числом рисунков в день")} use up up = 0; Parseint ($ ("#Spoint"). Html ()); rotatefn (0, "Поздравляю с победой в призеле!");Приведенный выше код реализует базовую логику, а также требует метода поворота поворота, чтобы ответить на результаты, передаваемые с сервера:
// Поверните товар проигрывателя: позиция приза; txt: rompty; var rotatefn = function (item, txt) {// Вычислять соответствующий радиан на основе числа призов, передаваемых var gles = item *(360/turnplate.restaraunts.length)-(360/(turnplate.restaraunts.length *2)); if (углы <270) {углы = 270- углы; } else {ogles = 360- углы +270; } // насильно остановить проигрыватель $ ('#WheelCanvas'). StopRotate (); // Вычисление метода вращения, установление необходимых параметров и функции обратного вызова $ ('#WheelCanvas'). Вращение ({// Угол угла запуска: 0, // Угол вращения +1800 - это еще несколько поворотов Animateto: углы +1800, продолжительность: 8000, Callback: function () {iosccess (txt); if ($ ("#code"). val ()! = "1093") {delockload (gethttpprefix + "graphicdetails.html? lukyid =" + $ ("#code"). Val ())}}}); };ОК, основные коды функций были обмены, и некоторые инструменты и методы не поняты. Вы можете оставить сообщение, и я добавлю его.
Суммировать
Canvas - очень мощный туз HTML5 и может достичь многих блестящих эффектов. Я надеюсь, что эта статья может помочь некоторым друзьям, которые учатся использовать холст.