Примеры в этой статье делятся конкретным кодом лотереи по поворотам JS для вашей ссылки. Конкретный контент заключается в следующем
1. Основные эффекты достигнуты
2. Основной контент
• Использование тегов холста в HTML5
• Плагин jqueryrotate.js вращения
3. Главный HTML -код
<body> <div> <div> <canvas id = "whelcanvas"> </canvas> <img src = "Images/wheel-pointer.png"/> </div> </div> <div> <span Id = "tip"> jason </span> </div> </body> </html>
4. Главный код CSS
.content {Display: Block; Ширина: 95%; Маржа: 30px auto;}. Содержание .wheel {display: block; Ширина: 100%; позиция: относительно; фоновая image: url (../ Images/wheel-bg.png); размер фонового размера: 100%100%;}. Содержание. Wheel Canvas.Item {ширина: 100%;}. Содержание .Wheel Img.Pointer {позиция: Absolute; Ширина: 31,5%; высота: 42,5%; Слева: 34,6%; Верх: 23%;}. Советы {Text-Align: Center; Маржа: 20px 0; Шрифт: нормальный 24px 'microsoft yahei';}5. Core JS -код
/ * * Рендеринг поворота * */функция DrawWheelCanvas () {// Получить холст артборд, эквивалентный слое? ? var canvas = document.getElementbyId ("whelcanvas"); // var canvas = ($ ("#wheelcanvas")). get () [0]; // Обратите внимание, что jQuery получает обернутый объект, а не объект DOM, и может быть преобразован // Рассчитать угол, занятый каждым блоком, Radian System Var BaseAngle = Math.pi * 2 / (Turnweel.RewardNames.length); // Получить контекст var ctx = canvas.getContext ("2d"); var canvasw = canvas.width; // высота артборда var canvash = canvas.height; // ширина артборда // очистить прямоугольник в данном прямоугольнике ctx.clearrect (0,0, canvasw, canvash); // Strokestyle рисует цвет ctx.strokestyle = "#ffbe04"; // red // Атрибут шрифта текущего шрифта текстового содержимого на Canvas ctx.font = '16px microsoft yahei'; // Обратите внимание, что исходная позиция нарисована с угла 0 °. То есть направление горизонтально справа. // Нарисуйте конкретное содержание для (var index = 0; index <turnwheel.rewardnames.length; index ++) {// Угол тока VAR Angle = Turnweel.StartAnge+Index * BaseAngle; // заполнить цвет ctx.fillstyle = turphile.colors [index]; // Начнете рисовать содержимое // ----------------------------------- ctx.beginpath (); /** Нарисуйте дуги, похожие на Quartz2d в ios* context.arc (x, y, r, sangle, eaengle, против часовой стрелки); * x: центральная точка круга x * y: центральная точка круга x * Sangle, Eangle: Угол начала, угол окончания * против часовой стрелки: Нарисовать направление, необязательно, false = по часовой стрелке, истина = против часовой стрелки * */ ctx.arc (canvasw * 0,5, canvash * 0.5, turpheel.outsideradius, angle, angle + baseangle, false); ctx.arc (canvasw * 0,5, canvash * 0,5, turphile.insideradius, angle + baseangle, true); ctx.stroke (); ctx.fill (); // Сохранить состояние холста, аналогично стеку графического контекста. Вы можете восстановить состояние позже (координаты восстанавливаются в текущем 0, 0), ctx.save (); /*---- Нарисуйте содержимое приза --------*/ // Red Font ctx.fillstyle = "#e5302f"; var rewardname = turbheel.rewardnames [index]; var line_height = 17; // Перевод метода Remap (0,0) позиции на Canvas // context.translate (x, y); // см. Ppt Picture, var translatex = canvasw * 0.5 + math.cos (угол + baseangle / 2) * Turphile.textradius; var translatey = canVash * 0.5 + math.sin (угол + baseangle / 2) * Turphile.textradius; ctx.translate (transtatex, transtatey); // Метод вращения поворачивает текущий чертеж, потому что текст подходит для центральной линии текущего сектора перпендикулярной! // Угол, угол тока самого вентилятора + басиангл / 2 Угол центральной линии состоит из многооткрыта + вертикальный угол 90 ° CTX.ROTATE (угол + BASEANGLE / 2 + MATH.PI / 2); /** Следующий код оказывает различные эффекты в соответствии с типом приза и длиной имени приза, такими как шрифт, цвет и эффекты изображения. (Специально изменение в соответствии с фактической ситуацией) **/ // Метод Canvas measureText () возвращает объект, содержащий указанную ширину шрифта в пикселях. // Метод fillText () рисует заполненный текст на холсте. Цвет текста по умолчанию черный. Свойство FillStyle отображает текст с другим цветом/Gradient/ * * context.filltext (текст, x, y, maxwidth); * Примечание! ! ! Y - нижнее значение текста, а не верхнее значение! ! ! * */if (rewardname.indexof ("m")> 0) {// Запрос, содержатся ли в полевых пакетах трафика var rewardnames = rewardname.split ("m"); for (var j = 0; j <rewardnames.length; j ++) {ctx.font = (j == 0)? if (j == 0) {ctx.filltext (rewardnames [j]+"m", -ctx.measuretext (rewardnames [j]+"m"). Ширина / 2, j * line_height); } else {ctx.filltext (rewardnames [j], -tctx.measuretext (rewardnames [j]). ширина / 2, j * line_height); }}} else if (rewardname.indexof ("m") == -1 && rewardname.length> 6) {// Длина призового имени превышает определенный диапазон rewardname = rewardname.substring (0,6)+"||"+rewardname.substring (6); var rewardnames = rewardname.split ("||"); for (var j = 0; j <rewardnames.length; j ++) {ctx.filltext (rewardnames [j], -ctx.measuretext (rewardnames [j]). Ширина / 2, j * line_height); }} else {// Нарисуйте цветной текст на холсте. Цветом по умолчанию текста является черный ctx.filltext (rewardname, -ctx.measuretext (rewardname) .width / 2, 0); } // Добавить соответствующий значок if (rewardname.indexof ("qcoin")> 0) {// Обратите внимание, что вам нужно подождать, пока загрузка IMG не будет завершена до того, как IMG сможет нарисовать imgqb.onload = function () {ctx.drawimage (imgqb, -15,10); }; ctx.drawimage (imgqb, -15,10); } else if (rewardname.indexof ("Спасибо за участие")> = 0) {imgsorry.onload = function () {ctx.drawimage (imgsorry, -15,10); }; ctx.drawimage (imgsorry, -15,10); } // Restore () Перед восстановлением состояния артборда до предыдущего сохранения () State ctx.restore (); /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------наконец
Эта вещь почти такая же, как технология Quartz2D в iOS ...
Подробный код >>>> нажмите, чтобы загрузить
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.