ionic实现转盘抽奖-画布绘制

ionic实现转盘抽奖-画布绘制

近期有幸接触了ionic,做一个抽奖转盘的界面,因为采用的是前后端分离的状态,并且奖品的内容需要实时的更换,所以需要制作一个灵活的转盘,最终的结果就是下面的这样: 抽奖转盘实现
其中指针和后面点状的都是固定的图片.需要根据奖品的个数和内容可以随意更换上转盘上的奖品内容.所以会涉及到今天说的–画布绘制.同时会用到一些jquery的知识.因为界面在一开始的时候就要加载完成,所以我们将所有的方法放到ionic TS文件中的ionViewDidLoad(){}方法中,这样在页面加载的就可以完成画布的绘制.

第一步:声明变量

需要用到的变量不是很多.

    var turnplate={
      // restaraunts:[],                //大转盘奖品名称
      colors:[],                    //大转盘奖品区块对应背景颜色
      outsideRadius:192,            //大转盘外圆的半径
      textRadius:155,               //大转盘奖品位置距离圆心的距离
      insideRadius:68,          //大转盘内圆的半径
      startAngle:0,             //开始角度
  };
}

第二步:设置要添加的内容和转盘的背景颜色

    //动态添加大转盘的奖品与奖品区域背景颜色
  turnplate.restaraunts = ["大娃:力大无穷", "二娃:千里眼顺风耳", "三娃:金钢不坏", "四娃:火之子", "五娃:水之子", "六娃:隐身娃", "七娃:我有宝葫芦 ", "蛇精:叫我女王", "蝎子精:宝贝,哪跑", "爷爷:快来抓我"];
  turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#DDDDDD","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];

第三步:这是绘制画布和ionic交互最重要的地方

  var canvas = document.getElementById("g-lottery")as HTMLCanvasElement;

其中(‘g-lottery’)是图片的一个id
在HTML中这样显示

      <div class="turnplate" style="background-image:url('assets/imgs/turnplate-bg.png');background-size:100% 100%;">
        <canvas class="item" id="g-lottery" width="422px" height="422px"></canvas>
        <img class="pointer" src="assets/imgs/turnplate-pointer.png" (click)="spin()"/>
      </div>

第四步:绘制的细节

接下来就是画布绘制最核心的部分代码

 //根据奖品个数计算圆周角度
   var arc = Math.PI / (this.newList.length/2);
   var ctx = canvas.getContext("2d");
   ctx.strokeStyle = "#FFBE04";//设置字体的颜色
   ctx.font = '16px Microsoft YaHei';//设置字体的样式
    for(var i = 0; i < this.newList.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();

第四步:设置要添加的内容和转盘的背景颜色

public class zhiwei(){
    //我是职位1
}

第五步:开始填充画布

加下来开始将画布上的内容丰富.

 //----绘制奖品开始----
 ctx.fillStyle = "#E5302F";
 var text = this.newList[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);

 /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
 if(text.indexOf("M")>0){//流量包
   var texts = text.split("M");
   for(var j = 0; j<texts.length; j++){
     ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
     if(j == 0){
       ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
     }else{
       ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
     }
   }
 }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围
   text = text.substring(0,6)+"||"+text.substring(6);
   var texts = text.split("||");
   for(var j = 0; j<texts.length; j++){
     ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
   }
 }else{
   //在画布上绘制填色的文本。文本的默认颜色是黑色
   //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
   ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
 }

第六步:收尾工作

如果昨晚了前面的内容会发现转盘上每个奖项的位置会乱
就像下面这样:
这里写图片描述

所以不能遗忘这最后的一步.

ctx.restore();

这样整个过程就全部结束了~

最后转盘也会展示出来:
这里写图片描述

ionic抽奖转盘-画布绘制