字节跳动小程序蜘蛛图

作者: squidbrother | 来源:发表于2020-03-24 16:49 被阅读0次

字节跳动小程序蜘蛛图
河南君诺，字节跳动小程序，抖音小程序，今日头条小程序
node 批量修改文件后缀名
字节跳动小程序
字节跳动小程序分析有什么用？前景如何？
抖音头条小程序注册开发
解决字节跳动开发者工具无法安装问题
字节跳动小程序支付详解
跨端开发痛点？送你一款Vue最流行的跨端框架——uni-app
几个前端时下流行框架

效果图

截图

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();
  }
});

字节跳动小程序蜘蛛图
效果图 ttml ttss js
河南君诺，字节跳动小程序，抖音小程序，今日头条小程序
河南君诺，字节跳动小程序，抖音小程序，今日头条小程序字节跳动小程序代理服务商河南君诺开发者以字节小程序为载体，利...
node 批量修改文件后缀名
1、公司要求微信小程序转字节跳动小程序，字节跳动官方没出搬家工具，于是自行研究 node fs 模块，批量修改...
字节跳动小程序
access_token管理、图片审核支付相关
字节跳动小程序分析有什么用？前景如何？
近几年小程序渐渐成为微信、百度、支付宝等巨头的标配，各大互联网巨头纷纷加码小程序，字节跳动自然也不甘落后。字节跳动...
抖音头条小程序注册开发
字节跳动小程序旨在针对字节跳动全平台，增强内容作者与内容流量的服务、拓展和消费变现能⼒，打造行业标杆，创造流量变现...
解决字节跳动开发者工具无法安装问题
从字节跳动小程序文档--地址： https://developer.toutiao.com/docs/devtoo...
字节跳动小程序支付详解
微信支付详解 1.为什么要写这篇文章参考了字节跳动官方的文档之后发现写的太简单，完全一头雾水摸不清头脑，后来在百...
跨端开发痛点？送你一款Vue最流行的跨端框架——uni-app
前言今天来聊一下前端必备技能——小程序开发。从最早发布的微信小程序，到后来的支付宝小程序、字节跳动小程序、百度...
几个前端时下流行框架
公司的微信小程序项目需要扩展支持多端（H5，百度小程序，支付宝小程序，字节跳动小程序），所以了解了一下时下（20...