canva 大转盘（自己没事研究的。仅供参考）

Love The Way You Lie 2021-09-29 23:58 272阅读 0赞

微信小程序开发交流qq群   581478349 ；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

自己没事研究的，最近比较忙没时间往下写了，适合刚接触canva的，容易看懂，后续再更新；

如果需要多端使用的话建议用写H5页面

<canvas canvas-id="myCanvas" class="canvas"></canvas>
    //css比较少我就放这里了
    //.canvas{
    	//width: 100%;
    	//height: 100%;
    	//position: fixed;
    //}

// 获取应用实例
    Page({
      data: {
        width: 0,
        height: 0,
        number: 1
      },
      //onLoad生命周期函数，监听页面加载
      onLoad: function() {
        //将全局变量Index保存在that中，里面函数调用
        var that = this
        //获取系统信息
        wx.getSystemInfo({
          //获取系统信息成功，将系统窗口的宽高赋给页面的宽高
          success: function(res) {
            that.width = res.windowWidth
            that.height = res.windowHeight
          }
        })
    
      },
      //onReady生命周期函数，监听页面初次渲染完成
      onReady: function() {
        var that = this
        //调用canvasClock函数
        this.canvasClock()
        //对canvasClock函数循环调用
        this.interval = setInterval(this.canvasClock, 1000)
      
      },
      canvasClock: function() {
        var that = this
        var context = wx.createContext() //创建并返回绘图上下文（获取画笔）
        //设置宽高
        var width = this.width
        var height = this.height
        var R = width / 2 - 65;
        //设置文字距离时钟中心点距离
        //重置画布函数
        function reSet() {
          context.height = context.height; //每次清除画布，然后变化后的时间补上
          context.translate(width / 2, height / 2);
          //设置坐标轴原点
          context.save(); //保存中点坐标1
        }
        //绘制中心圆和外面大圆
        function circle() {
          //外面大圆
          context.setLineWidth(2);
          context.beginPath();
    
          context.arc(0, 0, width / 2 - 10, 0, 2 * Math.PI, true);
          context.setFillStyle("#87CEFF");
          context.fill();
          context.closePath();
          // 边线
          // context.stroke();
          //中心圆
          context.beginPath();
          context.arc(0, 0, width / 2 - 40, 0, 2 * Math.PI, true);
          context.setFillStyle("#F5AD26");
          context.fill();
          context.closePath();
          // context.stroke();
        }
    
        //跑马灯小圆
        function smallGrid() {
          // context.setLineWidth(0);
          context.rotate(-Math.PI / 2);
          //时间从3点开始，倒转90度
          var number = that.data.number
          for (var i = 0; i < 20; i++) {
            context.rotate(Math.PI / 10);
            context.beginPath();
            context.arc(135, 0, 8, 0, 2 * Math.PI);
            if (number == 1) {
              if (i % 2 == 0) {
                context.setFillStyle("#1E90FF")
              } else {
                context.setFillStyle("#FFA500");
              }
              that.data.number = 2
            } else {
              that.data.number = 1
              if (i % 2 == 1) {
                context.setFillStyle("#1E90FF")
              } else {
                context.setFillStyle("#FF3E96");
              }
            }
            context.fill()
            context.closePath();
    
          }
        }
     //  扇形分割
        function bigGrid() {
          context.setLineWidth(1);
          // 圆心点
          context.beginPath()
          context.arc(0, 0, 4, 0, 2 * Math.PI)
          context.setFillStyle('lightgreen')
          context.fill()
          for(var i=6; i>=0; i--){
            context.beginPath()
            context.moveTo(0, 0);
            if(i%2==0){
    console.log(i)
              context.setFillStyle('#FFDAB9')
            }else{
              console.log(1,i)
              context.setFillStyle('#6495ED')
            }
            console.log(2, i)
            context.arc(0, 0, 120, 0, (2 / 6 * Math.PI) * i)
            context.fill()
          }
        }
        //绘制字体
        function num() {
          var R = width/2-80; //设置文字距离时钟中心点距离
          context.setFontSize(12)//设置字体样式
          context.fillStyle = "red";
          context.textAlign = "center";
       for (var i =0; i <6; i++) {
            context.save();
            context.beginPath();
            context.rotate((i * 60-30) * Math.PI / 180);
            context.fillStyle = 'black';
            context.font = "18px 微软雅黑";
            context.textBaseline = "bottom";
         var textArr = ['一等奖', '二等奖', '三等奖', '四等奖', '参与奖', '谢谢惠顾']
         var text = textArr[i]
            context.fillText(text, 75,0 );
            context.restore();
         context.fill();
          }
          context.restore();
        }
    
        //指针运动函数
        function move() {
          context.setLineWidth(7);
          //绘制指针
          context.setStrokeStyle("red")
          context.setLineWidth(5);
          context.beginPath();
          // 指针的方向
          var  num=[1,2,3,4,5]
          var num_=[0,1,2,3,4,5,6,7,8,9]
          context.rotate(5-2);
          context.arc(0, 0, 10, 0, 2 * Math.PI, true);
          context.setFillStyle('red')
          context.fill()
          context.moveTo(0, 0);
          context.lineTo(30, 0);
          context.stroke();
        }
        //调用
        function drawClock() {
          reSet();
          circle();
          smallGrid();
          bigGrid();
          num();
          move();
        }
        drawClock() //调用运动函数
        // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
        wx.drawCanvas({
          canvasId: 'myCanvas',
          actions: context.getActions()
        })
      },
      //页面卸载，清除画布绘制计时器
      onUnload: function() {
        clearInterval(this.interval)
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190724100953673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70