diff --git a/src/app/ui/luck-draw/luck-draw.component.html b/src/app/ui/luck-draw/luck-draw.component.html index 15e52b5..611abad 100644 --- a/src/app/ui/luck-draw/luck-draw.component.html +++ b/src/app/ui/luck-draw/luck-draw.component.html @@ -1,55 +1,51 @@ - - - - - -
-
-
-
-
未中奖
-
-
-
-
-
未中奖
-
+ + + + +
+
+
+
+ 请选择支队 + {{item.name}} +
+
-
-
- -
-

二等奖

-

罗技鼠标

+
+ +
-
-
-
未中奖
-
+ + + -
-
抽 奖
-
-
- +
+ + + + + + - - diff --git a/src/app/ui/luck-draw/luck-draw.component.scss b/src/app/ui/luck-draw/luck-draw.component.scss index a9073a2..14609b5 100644 --- a/src/app/ui/luck-draw/luck-draw.component.scss +++ b/src/app/ui/luck-draw/luck-draw.component.scss @@ -1,126 +1,81 @@ -* { - margin: 0; - padding: 0; -} -body { - font-family: "Microsoft YaHei",微软雅黑; -} -.box { - width: 600px; - height: 600px; - background-color: #DEA681; - border-radius: 50%; - margin: 30px auto; - padding: 20px; - position: relative; - overflow: hidden; -} -.lottery { - width: 600px; - height: 600px; - margin: 0 auto; - border-radius: 50%; - overflow: hidden; + + html, body { + height: 100%; + } + + .mainbox { + width: 95%; + height: 95%; + padding: 0.125rem 0.125rem 0; + display: flex; + + } + + .centerLeft{ + float: left; + height: 100%; + width: 100%; position: relative; - background-color: #330000; - box-shadow: 0 0 15px #000; -} -.block { - box-shadow: 0 0 1px #000 inset; - position: absolute; + flex-direction: column; + flex: 2%; + display: flex; + align-items:center; + box-sizing: border-box; + margin: 0 0; +.tanCenterbtn{ + width: 100%; + height: 100%; +border: 1px solid #30bbec; +display: flex; +flex-direction: column; +user-select: none; +background-size:100% 100%; +span{ width: 300px; - height: 300px; - transform-origin: right bottom 0; - -webkit-transform-origin: right bottom 0; -} -.block:nth-child(odd) { - background-color: #F1AAA6; -} -.block:nth-child(even) { - background-color: #FD5B78; -} -.block:nth-child(1) { - transform: rotate(0deg) skewY(45deg); -} -.block:nth-child(2) { - transform: rotate(45deg) skewY(45deg); -} -.block:nth-child(3) { - transform: rotate(90deg) skewY(45deg); -} -.block:nth-child(4) { - transform: rotate(135deg) skewY(45deg); + cursor:pointer; + border-bottom:1px solid #30bbec; + padding: 8px ; + text-align: center; + font-size: 24px; } -.block:nth-child(5) { - transform: rotate(180deg) skewY(45deg); } -.block:nth-child(6) { - transform: rotate(225deg) skewY(45deg); } -.block:nth-child(7) { - transform: rotate(270deg) skewY(45deg); -} -.block:nth-child(8) { - transform: rotate(315deg) skewY(45deg); -} -.content { - width: 200px; - height: 230px; - transform-origin: center center 0; - transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px); - -webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px); - position: absolute; - right: 0; - bottom: 0; - text-align: center; -} -.content .img { - width: 100px; - height: 100px; - margin: 0 auto; -} -.content .text { - width: 100px; - height: 50px; - font-size: 20px; - line-height: 32px; - margin: 0 auto; -} -.content .none { - width: 34px; - height: 200px; - margin: 0 auto; +.colum{ + height: 100%; + //width: 100%; + display:table-cell; + vertical-align:middle; text-align: center; - font-size: 34px; - line-height: 200%; - font-weight: bold; -} -.content img { - width: 80px; - height: 100px; -} -.btn { - width: 100px; - height: 100px; - border-radius: 50%; - text-align: center; - line-height: 100px; - background-color: #9966CC; - position: absolute; - font-size: 28px; - top: 270px; - left: 270px; - cursor: pointer; - box-shadow: 0 0 14px #000 inset; - color: #FFF; -} -.str { - height: 0px; - width: 0px; - position: absolute; - top: 10px; - left: 300px; - border-top: 60px solid #9966CC; - border-left: 20px solid transparent; - border-right: 20px solid transparent; -} + span{ + font-size: 24px; + + //padding-top: 50%; + } +} +//选择后加背景色 +.beijicolor{ + background-color: #F7BA2A ; +} + body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} + body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} + ul,ol{list-style-type:none;} + select,input,img,select{vertical-align:middle;} + input{ font-size:12px;} + a{ text-decoration:none; color:#000;} + a:hover{color:#c00; text-decoration:none;} + .clear{clear:both;} + + /* 大转盘样式 */ + .banner{max-height: 650px; + display: block; + width: 95%; + max-width: 650px; + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; + } + .banner .turnplate{display:block;width:100%;position:relative;} + .banner .turnplate canvas.item{width:100%;} + .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} + + \ No newline at end of file diff --git a/src/app/ui/luck-draw/luck-draw.component.ts b/src/app/ui/luck-draw/luck-draw.component.ts index 6c7bd8f..26ac676 100644 --- a/src/app/ui/luck-draw/luck-draw.component.ts +++ b/src/app/ui/luck-draw/luck-draw.component.ts @@ -1,5 +1,15 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-25 08:48:50 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-27 14:58:42 + */ import { Component, OnInit } from '@angular/core'; -declare var KinerLottery:any +//import * from '../../../assets/js/awardRotate' + +declare var zhuan:any @Component({ selector: 'app-luck-draw', templateUrl: './luck-draw.component.html', @@ -9,13 +19,47 @@ export class LuckDrawComponent implements OnInit { constructor() { } - ngOnInit(): void { + ngOnInit(){ + window.setTimeout(()=>{ + //zhuan.drawRouletteWheel() + },0) - - } - + //支队数据和是否抽奖 + choujiang=[ + {name:"钦州支队",idnum:1}, + {name:"南宁支队",idnum:2}, + {name:"柳州支队",idnum:3}, + {name:"河池支队",idnum:4}, + {name:"来宾支队",idnum:5}, + {name:"贺州支队",idnum:6}, + {name:"防城港支队",idnum:7}, + {name:"崇左支队",idnum:8}, + {name:"贵港支队",idnum:9}, + {name:"梧州支队",idnum:10}, + {name:"百色支队",idnum:11}, + {name:"玉林支队",idnum:12}, + {name:"北海支队",idnum:13}, + {name:"桂林支队",idnum:14} + ] + //选中支队 + chooseid=-1 + chosseZhidui(key){ + this.chooseid=key + } - + turnplate={ + restaraunts:[], //大转盘奖品名称 + colors:[], //大转盘奖品区块对应背景颜色 + outsideRadius:192, //大转盘外圆的半径 + textRadius:155, //大转盘奖品位置距离圆心的距离 + insideRadius:68, //大转盘内圆的半径 + startAngle:0, //开始角度 + bRotate:false //false:停止;ture:旋转 + }; + + + + } diff --git a/src/assets/images/1.png b/src/assets/images/1.png new file mode 100644 index 0000000..4c6c884 Binary files /dev/null and b/src/assets/images/1.png differ diff --git a/src/assets/images/2.png b/src/assets/images/2.png new file mode 100644 index 0000000..ab9391c Binary files /dev/null and b/src/assets/images/2.png differ diff --git a/src/assets/images/turnplate-bg.png b/src/assets/images/turnplate-bg.png new file mode 100644 index 0000000..542bb12 Binary files /dev/null and b/src/assets/images/turnplate-bg.png differ diff --git a/src/assets/images/turnplate-pointer.png b/src/assets/images/turnplate-pointer.png new file mode 100644 index 0000000..887a8bb Binary files /dev/null and b/src/assets/images/turnplate-pointer.png differ diff --git a/src/assets/images/zhuan.gif b/src/assets/images/zhuan.gif new file mode 100644 index 0000000..67524b7 Binary files /dev/null and b/src/assets/images/zhuan.gif differ diff --git a/src/assets/js/awardRotate.js b/src/assets/js/awardRotate.js new file mode 100644 index 0000000..f6d483f --- /dev/null +++ b/src/assets/js/awardRotate.js @@ -0,0 +1,305 @@ + + (function($) { + var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); + for (var a=0;a this._parameters.duration; + + // TODO: Bug for animatedGif for static rotation ? (to test) + if (checkEnd && !this._parameters.animatedGif) + { + clearTimeout(this._timer); + } + else + { + if (this._canvas||this._vimage||this._img) { + var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); + this._rotate((~~(angle*10))/10); + } + if (this._parameters.step) { + this._parameters.step(this._angle); + } + var self = this; + this._timer = setTimeout(function() + { + self._animate.call(self); + }, 10); + } + + // To fix Bug that prevents using recursive function in callback I moved this function to back + if (this._parameters.callback && checkEnd){ + this._angle = this._parameters.animateTo; + this._rotate(this._angle); + this._parameters.callback.call(this._rootObj); + } + }, + + _rotate : (function() + { + var rad = Math.PI/180; + if (IE) + return function(angle) + { + this._angle = angle; + this._container.style.rotation=(angle%360)+"deg"; + } + else if (supportedCSS) + return function(angle){ + this._angle = angle; + this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; + } + else + return function(angle) + { + this._angle = angle; + angle=(angle%360)* rad; + // clear canvas + this._canvas.width = this._width+this._widthAdd; + this._canvas.height = this._height+this._heightAdd; + + // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. + this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen + this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal + this._cnv.rotate(angle); // rotate image + this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center + this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) + this._cnv.drawImage(this._img, 0, 0); // First - we draw image + } + + })() + } + + if (IE) + { + Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ + document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); + try { + !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); + return function (tagName) { + return document.createElement(''); + }; + } catch (e) { + return function (tagName) { + return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); + }; + } + })(); + } + })(jQuery); + + diff --git a/src/assets/js/zhuanpan.js b/src/assets/js/zhuanpan.js new file mode 100644 index 0000000..08ed5ef --- /dev/null +++ b/src/assets/js/zhuanpan.js @@ -0,0 +1,354 @@ + +var turnplate={ + restaraunts:[], //大转盘奖品名称 + colors:[], //大转盘奖品区块对应背景颜色 + outsideRadius:192, //大转盘外圆的半径 + textRadius:155, //大转盘奖品位置距离圆心的距离 + insideRadius:68, //大转盘内圆的半径 + startAngle:0, //开始角度 + bRotate:false //false:停止;ture:旋转 +}; +choujiang=[ + {name:"钦州支队",idnum:1,result:""}, + {name:"南宁支队",idnum:1,result:""}, + {name:"柳州支队",idnum:1,result:""}, + {name:"河池支队",idnum:1,result:""}, + {name:"来宾支队",idnum:1,result:""}, + {name:"贺州支队",idnum:1,result:""}, + {name:"防城港支队",idnum:1,result:""}, + {name:"崇左支队",idnum:1,result:""}, + {name:"贵港支队",idnum:9,result:""}, + {name:"梧州支队",idnum:10,result:""}, + {name:"百色支队",idnum:11,result:""}, + {name:"玉林支队",idnum:12,result:""}, + {name:"北海支队",idnum:13,result:""}, + {name:"桂林支队",idnum:14,result:""} +] +$(document).ready(function(){ + //var chooseid = $( "span[name='zhidui']").attr('id'); + $("span[name='aaa']").on("click",function(){ + console.log($(this).html()) + if($(this).html()=="钦州支队"){ + turnplate.restaraunts = ["广西东油沥青有限公司", "钦州吾悦广场", "钦州天亿石化有限公司"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6"]; + console.log(choujiang[0].result) + if(choujiang[0].idnum<=2) + { + $("#zhuanpan").show() + $("#end").hide(); + console.log(choujiang[0].idnum) + choujiang[0].idnum++ + choujiang[0].result='钦州吾悦广场' + $("#jieguo").empty() + }else{ + $("#zhuanpan").hide() + $("#end").show(); + console.log(choujiang[0].idnum) + $("#jieguo").empty() + $("#jieguo").append("您的抽签结果为：
"+choujiang[0].result) + } + + drawRouletteWheel() + }else if($(this).html()=="南宁支队") + { + turnplate.restaraunts = ["九洲国际（超高层）", "南宁国际会展中心", "维景国际酒店", "荔园山庄 "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + if(choujiang[1].idnum<=2) + { + $("#zhuanpan").show() + $("#end").hide(); + choujiang[1].idnum++ + choujiang[1].result='九洲国际（超高层）' + $("#jieguo").empty() + }else{ + $("#zhuanpan").hide() + $("#end").show(); + $("#jieguo").empty() + $("#jieguo").append("您的抽签结果为：
"+choujiang[1].result) + } + drawRouletteWheel() + }else if($(this).html()=="柳州支队") + { + turnplate.restaraunts = ["广西柳州莲花山庄", "柳州万达广场", "龙城地下商业街", "板栗园加气站 ","地王财富中心"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="河池支队") + { + turnplate.restaraunts = ["河池市中石化金城江油库", "河池市宜州区地下商业街", "南城百货（地下） ","宁铁燃气有限责任公司","广西河池市大洋购物中心"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="来宾支队") + { + turnplate.restaraunts = ["来宾饭店（高层）", "宝晨化工", "天成百货（地下） ","百悦商业广场(地下）","来宾市方盛广场（人员密集）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="贺州支队") + { + turnplate.restaraunts = ["贺州市国际酒店（高层）", "宝晨化工有限公司", "贺州市南宁百货大楼", "远东国贸地下停车场 "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + } + else if($(this).html()=="防城港支队") + { + turnplate.restaraunts = ["防城港供电局", "北京华联超市桂海东盟店", "港宸国际大酒店（高层）", "永旺天和商贸有限公司(只做地下一） ", "广西中油能源有限公司 ","中海油广西防城港天然气有限责任公司 "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="崇左支队") + { + turnplate.restaraunts = ["崇左油库","崇左市雅图影视广场（6层商场）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="贵港支队") + { + turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "维多利亚酒店（高层）","平南中心购物广场（地下）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="梧州支队") + { + turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "梧州市中石化火山油库","平南中心购物广场（地下）", ]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="百色支队") + { + turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="玉林支队") + { + turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","玉林市中医医院"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="北海支队") + { + turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","和安宁春城（大型城市综合体）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="桂林支队") + { + turnplate.restaraunts = ["兴安油库", "宏谋酒店（高层）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + } + }); + console.log(turnplate.restaraunts) +//动态添加大转盘的奖品与奖品区域背景颜色 +/* turnplate.restaraunts = ["广西东油沥青有限公司", "钦州天亿石化有限公司", "九洲国际（超高层）", "南宁国际会展中心 ", "维景国际酒店", "荔园山庄"]; +turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; */ +/* turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"]; +turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; */ + + +var rotateTimeOut = function (){ + $('#wheelcanvas').rotate({ + angle:0, + animateTo:2160, + duration:8000, + callback:function (){ + alert('网络超时，请检查您的网络设置！'); + } + }); +}; + +//旋转转盘 item:奖品位置; txt：提示语; +var rotateFn = function (item, txt){ + var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); + if(angles<270){ + angles = 270 - angles; + }else{ + angles = 360 - angles + 270; + } + $('#wheelcanvas').stopRotate(); + $('#wheelcanvas').rotate({ + angle:0, + animateTo:angles+1800, + duration:8000, + callback:function (){ + console.log(turnplate.restaraunts.length) + $("#zhuanpan").hide() + $("#end").show(); + var dataLength=turnplate.restaraunts.length + if(dataLength>=5) + { + $("#jieguo").append("您的抽签结果为：
"+turnplate.restaraunts[4]) + }else if(dataLength==3){ + $("#jieguo").append("您的抽签结果为：
"+turnplate.restaraunts[1]) + } + else{ + $("#jieguo").append("您的抽签结果为：
"+turnplate.restaraunts[0]) + } + turnplate.bRotate = !turnplate.bRotate; + } + }); +}; + +$('.pointer').click(function (){ + if(turnplate.bRotate)return; + turnplate.bRotate = !turnplate.bRotate; + //获取随机数(奖品个数范围内) + var item = rnd(1,turnplate.restaraunts.length); + console.log(item) + //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] + rotateFn(item, turnplate.restaraunts[item-1]); + /* switch (item) { + case 1: + rotateFn(252, turnplate.restaraunts[0]); + break; + case 2: + rotateFn(216, turnplate.restaraunts[1]); + break; + case 3: + rotateFn(180, turnplate.restaraunts[2]); + break; + case 4: + rotateFn(144, turnplate.restaraunts[3]); + break; + case 5: + rotateFn(108, turnplate.restaraunts[4]); + break; + case 6: + rotateFn(72, turnplate.restaraunts[5]); + break; + case 7: + rotateFn(36, turnplate.restaraunts[6]); + break; + case 8: + rotateFn(360, turnplate.restaraunts[7]); + break; + case 9: + rotateFn(324, turnplate.restaraunts[8]); + break; + case 10: + rotateFn(288, turnplate.restaraunts[9]); + break; + } */ + console.log(item); +}); +}); + +//控制中奖结果 +function rnd(n, m){ +var random = 5; +//var random = Math.floor(Math.random()*(m-n+1)+n); +return random; + +} + + +//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染 +window.onload=function(){ +drawRouletteWheel(); +}; + +function drawRouletteWheel() { +var canvas = document.getElementById("wheelcanvas"); +if (canvas.getContext) { + //根据奖品个数计算圆周角度 + var arc = Math.PI / (turnplate.restaraunts.length/2); + var ctx = canvas.getContext("2d"); + //在给定矩形内清空一个矩形 + ctx.clearRect(0,0,422,422); + //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式 + ctx.strokeStyle = "#FFBE04"; + //font 属性设置或返回画布上文本内容的当前字体属性 + ctx.font = '16px Microsoft YaHei'; + for(var i = 0; i < turnplate.restaraunts.length; i++) { + var angle = turnplate.startAngle + i * arc; + ctx.fillStyle = turnplate.colors[i]; + ctx.beginPath(); + //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆） + ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false); + ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); + ctx.stroke(); + ctx.fill(); + //锁画布(为了保存之前的画布状态) + ctx.save(); + + //----绘制奖品开始---- + ctx.fillStyle = "#E5302F"; + var text = turnplate.restaraunts[i]; + var line_height = 17; + //translate方法重新映射画布上的 (0,0) 位置 + ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius); + + //rotate方法旋转当前的绘图 + ctx.rotate(angle + arc / 2 + Math.PI / 2); + + /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ + if(text.indexOf("M")>0){//流量包 + var texts = text.split("M"); + for(var j = 0; j6){//奖品名称长度超过一定范围 + text = text.substring(0,6)+"||"+text.substring(6); + var texts = text.split("||"); + for(var j = 0; j0){ + var img= document.getElementById("shan-img"); + img.onload=function(){ + ctx.drawImage(img,-15,10); + }; + ctx.drawImage(img,-15,10); + }else if(text.indexOf("谢谢参与")>=0){ + var img= document.getElementById("sorry-img"); + img.onload=function(){ + ctx.drawImage(img,-15,10); + }; + ctx.drawImage(img,-15,10); + } + //把当前画布返回（调整）到上一个save()状态之前 + ctx.restore(); + //----绘制奖品结束---- + } +} +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 15655ad..56a9352 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,11 @@ + @@ -15,7 +23,9 @@ - - - + + + +