三力测试圆环绘制

src/otherPages/threeExamScore/index.vue

@@ -12,6 +12,13 @@
             height="300"
             type="2d"
           ></canvas>
+          <view style="border:none" class="wxad">
+            <ad
+              :ad-intervals="100"
+              ad-type="banner"
+              unit-id="adunit-8eb44bbd7e3147d4"
+            ></ad>
+          </view>
         </view>
       </view>
     </view>
@@ -56,18 +63,19 @@ export default {
      */
     drawHalfCircleAndScore(ctx) {
       let x1 = 85;
-      let y1 = 125;
+      let y1 = 100;
       let r1 = 70;
-      // ctx.moveTo(x1, y1);
-      // ctx.lineCap = "round";
-      // ctx.lineWidth = 20;
-      // ctx.strokeStyle = '#d8d8d8'
-      //  ctx.beginPath();
-      // ctx.arc(x1, y1, r1, 0, Math.PI, true);
-      // ctx.stroke();
+      //绘制灰环
+      ctx.moveTo(x1, y1);
+      ctx.lineCap = "round";
+      ctx.lineWidth = 20;
+      ctx.strokeStyle = "#d8d8d8";
+      ctx.beginPath();
+      ctx.arc(x1, y1, r1, Math.PI, 0, false);
+      ctx.stroke();
       // ctx.draw()
 
-
+      //绘制渐变
       ctx.moveTo(x1, y1);
       var arcColor = ctx.createLinearGradient(15, 125, 155, 125);
       arcColor.addColorStop(0, "#FF6D4E");
@@ -76,10 +84,27 @@ export default {
       ctx.lineCap = "round";
       ctx.lineWidth = 20;
       ctx.beginPath();
-      ctx.arc(x1, y1, r1, Math.PI/2, 0, true);
+      ctx.arc(x1, y1, r1, Math.PI, Math.PI * 1.2, false);
       ctx.stroke();
-      ctx.draw()
+      console.log(ctx);
+      // ctx.draw()
+      //绘制文字
+      ctx.moveTo(x1, y1);
+      ctx.textAlign = "center";
+      ctx.lineWidth = 1;
+      ctx.font = "30px sans-serif";
+      ctx.beginPath();
+      ctx.fillStyle = "#FF4D53";
+      ctx.fillText("20", x1, y1);
 
+      ctx.font = "14px sans-serif";
+      ctx.fillText("分", x1 + 25, y1);
+      ctx.stroke();
+
+      ctx.font = "18px sans-serif";
+      ctx.fillStyle = "#333333";
+      ctx.fillText("很遗憾考试不合格", x1, y1 + 40);
+      ctx.stroke();
     },
   },
 };