<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实现一个加载条
最新推荐文章于 2023-06-08 09:52:04 发布