字节跳动小程序 蜘蛛图

效果图

ttml

<!--inset-->
<view class="inset">
<!--titBoses-->
<view class="titBoses">
    <view class="points pos1">
        <text>速度</text>
        <view 
            class="tags {{skillArr[0]<45?'':''}} {{skillArr[0]>=45 && skillArr[0]<75?'orengeC1':''}} {{skillArr[0]>=75 && skillArr[0]<100?'orengeC2':''}}"
        >{{skillArr[0]}}</view>
    </view>
    <view class="points pos2">
        <text>射门</text>
        <view 
            class="tags {{skillArr[1]<45?'':''}} {{skillArr[1]>=45 && skillArr[1]<75?'orengeC1':''}} {{skillArr[1]>=75 && skillArr[1]<100?'orengeC2':''}}"
        >{{skillArr[1]}}</view>
    </view>
    <view class="points pos3">
        <text>传球</text>
        <view 
            class="tags {{skillArr[2]<45?'':''}} {{skillArr[2]>=45 && skillArr[2]<75?'orengeC1':''}} {{skillArr[2]>=75 && skillArr[2]<100?'orengeC2':''}}"
        >{{skillArr[2]}}</view>
    </view>
    <view class="points pos4">
        <text>盘球</text>
        <view 
            class="tags {{skillArr[3]<45?'':''}} {{skillArr[3]>=45 && skillArr[3]<75?'orengeC1':''}} {{skillArr[3]>=75 && skillArr[3]<100?'orengeC2':''}}"
        >{{skillArr[3]}}</view>
    </view>
    <view class="points pos5">
        <text>防守</text>
        <view 
            class="tags {{skillArr[4]<45?'':''}} {{skillArr[4]>=45 && skillArr[4]<75?'orengeC1':''}} {{skillArr[4]>=75 && skillArr[4]<100?'orengeC2':''}}"
        >{{skillArr[4]}}</view>
    </view>
    <view class="points pos6">
        <text>力量</text>
        <view 
            class="tags {{skillArr[5]<45?'':''}} {{skillArr[5]>=45 && skillArr[5]<75?'orengeC1':''}} {{skillArr[5]>=75 && skillArr[5]<100?'orengeC2':''}}"
        >{{skillArr[5]}}</view>
    </view>
</view>
<view class="canvasBox">
    <view class="bg">
        <image src="../../resource/image/canvasBg.png" mode="aspectFill" />
    </view>
    <!--蜘蛛图-->
    <canvas canvas-id="canvasBox2" style="width:204rpx; height:238rpx" class="canvas"></canvas>
</view>
</view>

ttss

.inset { position:relative; z-index: 2; padding:70rpx 104rpx; width:242rpx; height:238rpx; }
.titBoses { position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; }
.titBoses .points { position:absolute; z-index:2; font-size:22rpx; color:#2a303e; line-height:30rpx; text-align:center;}
.titBoses .points .tags { display:inline-block; padding:0 12rpx; margin-left:5rpx; background:#ccc; font-size:16rpx; color:#FFF; line-height:28rpx; vertical-align:middle;
-webkit-border-radius:4rpx; -moz-border-radius:4rpx; -ms-border-radius:4rpx; -o-border-radius:4rpx; border-radius:4rpx;
}
.titBoses .points .orengeC1 { background:#ffa435;}
.titBoses .points .orengeC2 { background:#ff6f35;}
.titBoses .pos1 { left:0; top:30rpx; width:100%;}
.titBoses .pos2 { right:56rpx; top:98rpx; width:60rpx;}
.titBoses .pos3 { right:56rpx; top:214rpx; width:60rpx;}
.titBoses .pos4 { left:0; bottom:30rpx; width:100%;}
.titBoses .pos5 { left:56rpx; top:214rpx; width:60rpx;}
.titBoses .pos6 { left:56rpx; top:98rpx; width:60rpx;}
.canvasBox { position:relative; z-index:2; width:204rpx; height:238rpx; margin:0 auto;} 
.canvasBox .bg { position:absolute; left:2%; top:0; z-index:-1; width:96%; height:100%; }
.canvasBox .bg image { display:block; width:auto; height:100%; margin:0 auto;}
.canvasBox canvas { display:block; width:204rpx; height:238rpx;}

js

Page({
  data: {
      skillArr:[26,84,51,86,90,44]
  },
  onLoad(){
      //蜘蛛图
      var _skillArr = this.data.skillArr;
      this.drawFn2(_skillArr);
      console.log('蜘蛛图');
  },
  //蜘蛛图
  drawFn2(numArr){

    //真机修正
    var _phonePercent = this.data.trueWPercent;
    //console.log(_phonePercent)

    var ctx = tt.createCanvasContext("canvasBox2");
    var linePoint1 = [ 
        {'x':51,'y':58},{'x':51,'y':52},{'x':51,'y':46},{'x':51,'y':40},{'x':51,'y':34},
        {'x':51,'y':28},{'x':51,'y':22},{'x':51,'y':16},{'x':51,'y':10},{'x':51,'y':4}
    ];
    var linePoint2 = [ 
      {'x':51,'y':60},{'x':56,'y':57},{'x':61,'y':54},{'x':66,'y':51},{'x':71,'y':48},
      {'x':76,'y':45},{'x':81,'y':42},{'x':86,'y':39},{'x':91,'y':36},{'x':96,'y':33}
    ];
    var linePoint3 = [ 
      {'x':51,'y':60},{'x':56,'y':63},{'x':61,'y':66},{'x':66,'y':69},{'x':71,'y':72},
      {'x':76,'y':75},{'x':81,'y':78},{'x':86,'y':81},{'x':91,'y':84},{'x':96,'y':87}
    ];
    var linePoint4 = [ 
      {'x':51,'y':60},{'x':51,'y':66},{'x':51,'y':72},{'x':51,'y':78},{'x':51,'y':84},
      {'x':51,'y':90},{'x':51,'y':96},{'x':51,'y':102},{'x':51,'y':108},{'x':51,'y':114}
    ];
    var linePoint5 = [ 
      {'x':51,'y':60},{'x':46,'y':63},{'x':41,'y':66},{'x':36,'y':69},{'x':31,'y':72},
      {'x':26,'y':75},{'x':21,'y':78},{'x':16,'y':81},{'x':11,'y':84},{'x':6,'y':87}
    ];
    var linePoint6 = [ 
      {'x':51,'y':60},{'x':46,'y':57},{'x':41,'y':54},{'x':36,'y':51},{'x':31,'y':48},
      {'x':26,'y':45},{'x':21,'y':42},{'x':16,'y':39},{'x':11,'y':36},{'x':6,'y':33}
    ];

    var num1 = Math.floor(numArr[0]/100*9);
    var num2 = Math.floor(numArr[1]/100*9);
    var num3 = Math.floor(numArr[2]/100*9);
    var num4 = Math.floor(numArr[3]/100*9);
    var num5 = Math.floor(numArr[4]/100*9);
    var num6 = Math.floor(numArr[5]/100*9);  
    //console.log(num1,num2,num3,num4,num5,num6)

    //-----绘制点
    //速度
    ctx.beginPath();
    ctx.setLineWidth(1);
    ctx.arc(linePoint1[num1].x*_phonePercent, linePoint1[num1].y*_phonePercent, 2, 0, Math.PI * 2);
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("#ffffff");
    ctx.fill();
    ctx.stroke();
    //射门
    ctx.beginPath();
    ctx.arc(linePoint2[num2].x*_phonePercent, linePoint2[num2].y*_phonePercent, 2, 0, Math.PI * 2);
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("#ffffff");
    ctx.fill();
    ctx.stroke();
    //传球
    ctx.beginPath();
    ctx.arc(linePoint3[num3].x*_phonePercent, linePoint3[num3].y*_phonePercent, 2, 0, Math.PI * 2);
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("#ffffff");
    ctx.fill();
    ctx.stroke();
    //盘球
    ctx.beginPath();
    ctx.arc(linePoint4[num4].x*_phonePercent, linePoint4[num4].y*_phonePercent, 2, 0, Math.PI * 2);
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("#ffffff");
    ctx.fill();
    ctx.stroke();
    //防守
    ctx.beginPath();
    ctx.arc(linePoint5[num5].x*_phonePercent, linePoint5[num5].y*_phonePercent, 2, 0, Math.PI * 2);
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("#ffffff");
    ctx.fill();
    ctx.stroke();
    //力量
    ctx.beginPath();
    ctx.arc(linePoint6[num6].x*_phonePercent, linePoint6[num6].y*_phonePercent, 2, 0, Math.PI * 2);
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("#ffffff");
    ctx.fill();
    ctx.stroke();
    
    //绘制面积
    ctx.beginPath();
    ctx.setLineWidth(1);
      //速度
    ctx.moveTo(linePoint1[num1].x*_phonePercent, linePoint1[num1].y*_phonePercent); 
      //射门
    ctx.lineTo(linePoint2[num2].x*_phonePercent, linePoint2[num2].y*_phonePercent); 
      //传球
    ctx.lineTo(linePoint3[num3].x*_phonePercent, linePoint3[num3].y*_phonePercent); 
      //盘球
    ctx.lineTo(linePoint4[num4].x*_phonePercent, linePoint4[num4].y*_phonePercent); 
      //防守
    ctx.lineTo(linePoint5[num5].x*_phonePercent, linePoint5[num5].y*_phonePercent); 
      //力量
    ctx.lineTo(linePoint6[num6].x*_phonePercent, linePoint6[num6].y*_phonePercent); 
    ctx.closePath();
    ctx.setStrokeStyle('#046fdb');
    ctx.setFillStyle("rgba(22,130,238,0.5)");
    ctx.fill();
    ctx.stroke();

    // ctx.setFillStyle('#000000');
    // ctx.setFontSize(20);
    // ctx.setTextAlign('center');
    // ctx.setTextBaseline('middle')
    // ctx.fillText('8', 51, 58);

    ctx.draw();
  }
});