用canvas画的一个加载条

2021-12-25 12:05:49 阅读：190 来源： 互联网

<template>
  <div class="about">
    总课程数量<input type="text" v-model="m">
    已完成数量<input type="text" v-model="n">
    <button @click="finish">确认完成</button>
    <canvas width="400px" height="250px" id="canvas"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ctx: '',
      m: 100,
      n: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.draw(this.n, this.m)
    })
    
  },

  methods: {
    draw(n, m){
      var c = document.getElementById('canvas');
      var ctx = c.getContext("2d");
      // 每次开始画之前先清空之前的内容
      ctx.clearRect(0,0,c.width,c.height); 
      // 绘制底部的灰色园
      ctx.beginPath();
      // 灰色圆的宽度
      ctx.lineWidth = 10;
      // 灰色圆的颜色
      ctx.strokeStyle = "#ccc"
      // arc 方法 第一个参数是圆心的x轴坐标 第二个参数是圆心Y轴坐标 
      // 第三个参数是园的半径 第四个参数是 画圆时的起始位置 第五个参数是结束为止
      // 第六个参数表示方向 false表示顺时针方向画
      ctx.arc(100, 80, 60, 0, 2*Math.PI, false);
      ctx.stroke();
     
      // 绘制灰色园上的红色圆
      ctx.beginPath()
      // 红色圆的线条宽度
      ctx.lineWidth = 10;
      // 红色圆的线条颜色
      ctx.strokeStyle = 'red';
      // 设置红色环显示的角度范围为 120度到420度 共300度 用100% 表示
      // 用已经完成的课程数/总课程数乘以100% 表示课程完成的百分比
      // 我们这里用 n表示完成的课程数量 用 m表示所有的课程数量
      // 则完成n个课程表示的百分比是 
      // n/m*300 表示完成 n个课程要描绘的度数
      // Math.pI 表示 180度
      ctx.arc(100, 80, 60, 2*Math.PI/3, 2*Math.PI/3 + (Math.PI + 2*Math.PI/3) * (n/m), false)
      // 设置两端为圆角
      ctx.lineCap="round";
      ctx.stroke()

      // 插入文本
      ctx.font = "18px sans-serif"
      // 填充红色字体
      ctx.fillStyle = 'red'
      // fillText 第一个参数为填充的内容 第二个参数是填充内容的x轴位置 第三个参数是填充的内容的Y轴位置
      ctx.fillText("继续学习", 65, 70);
      // 文字间的分割线
      ctx.beginPath();
      // moveTo意思是画线的初始位置 第一个参数为x轴位置 第二个参数为Y轴位置
      ctx.moveTo(62, 80);
      // lineTo是连线到下一个位置 第一个参数是x轴的位置 第二个参数是y轴的位置
      ctx.lineTo(140, 80);
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#ccc"
      ctx.stroke();

      // 第三行的文本
      ctx.font = "12px sans-serif"
      ctx.fillStyle = '#ccc'
      ctx.fillText(`已学习${this.n}/${this.m}课时`, 50, 100);
    },

    finish() {
      this.draw(this.n, this.m)
    }
  }
}
</script>
<style scoped>
  #canvas {
      background-color: #fff;
      margin: 0 auto;
  }
</style>

相关尺寸及内容请自行更改

标签：canvas,一个,位置,ctx,课程,参数,PI,Math,加载
来源： https://blog.csdn.net/Y66668888_/article/details/122141334

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用canvas画的一个加载条