vue+canvas 手绘进度条动画(不喜勿喷)
明确步骤
1.划一个矩形，加上文字效果
2.判断新值和现有值大小比较，并算出一份占矩形的长度
3.画图
直接上代码
<template>
<div id="index" class="index">
<canvas id="canvas"></canvas>
<br />
总值
<el-input
v-model="total"
style="width:100px"
placeholder="请输入内容"
></el-input>
输入值
<el-input
v-model="now"
:max="total"
style="width:100px"
placeholder="请输入内容"
></el-input>
<el-button type="primary" @click="btnClick">主要按钮</el-button>
</div>
</template>
<script>
export default {
props: {
// 父辈向子辈传参
},
name: "index",
data() {
return {
cvs: "", //画布
ctx: {},
total: 200, //总数
now: "", //现数
oldNumber: 0, //老值
newNumber: 0, //新值
proportion: "", //占比,
};
},
created() {
// 实例被创建之后执行代码
},
computed: {
// 计算属性
},
components: {
// 组件的引用
},
methods: {
// 方法
btnClick() {
this.proportion =
(Number(this.now) / Number(this.total)) * Number(this.cvs.width); //比例：一份占多长
this.newNumber = this.now;
if (this.newNumber > this.total) {
console.warn("超了");
} else {
if (Number(this.newNumber) > Number(this.oldNumber)) {
this.drivingChange(
Number(this.oldNumber),
Number(this.newNumber),
Number(this.now) / Number(this.total),
"++"
);
//增加
} else if (Number(this.newNumber) < Number(this.oldNumber)) {
//减少
this.drivingChange(
Number(this.oldNumber),
Number(this.newNumber),
Number(this.now) / Number(this.total),
"--"
);
} else {
console.warn("无变化");
}
}
},
drivingChange(oldVal, newVal, proportion, type) {
//驱动改变（旧值，新值，百分比，加还是减方式）
// console.warn(oldVal, newVal);
var ss = oldVal;
var that = this;
var timer = setInterval(function() {
that.clearRect();
if (type == "++") {
that.dram(ss++, proportion);
if (ss > newVal) {
clearInterval(timer);
}
} else {
that.dram(ss--, proportion);
if (ss < newVal) {
clearInterval(timer);
}
}
}, 10);
this.oldNumber = newVal;
},
dram(i, proportion) {
//画图
this.ctx.fillStyle = "#7fecc1";
/*矩形填充方法：fillRect(x,y,w,h)*/
this.ctx.fillRect(51, 51, i - 2, 58); //i-2是为了去除掉边框空隙的
this.ctx.fillStyle = "white";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.font = "26px 黑体";
this.ctx.fillText(i, 120, 70);
this.ctx.font = "16px 黑体";
this.ctx.fillText("基础**", 120, 95);
this.ctx.font = "30px 黑体";
this.ctx.fillText(proportion * 100 + "%", 200, 80);
},
clearRect() {
/*清理矩形方法：clearRect(x,y,w,h)*/
this.ctx.clearRect(50, 50, 200, 60);
},
initCanvas() {
//加载并绘制模型
this.cvs = document.getElementById("canvas");
//设置长宽
this.cvs.width = 400;
this.cvs.height = 400;
//获取画笔
this.ctx = this.cvs.getContext("2d");
//===============================填充矩形方法
/*填充矩形方法：fillRect(x,y,w,h)*/
this.ctx.fillStyle = "#7fecc1";
//===============================填充矩形方法
//===============================描边矩形
/*描边矩形方法：strokeRect(x,y,w,h)*/
this.ctx.strokeStyle = "#7fecc1";
this.ctx.lineWidth = 5;
this.ctx.strokeRect(50, 50, 200, 60);
//===============================描边矩形
//===============================文字
this.ctx.fillStyle = "white";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.font = "26px 黑体";
this.ctx.fillText("00", 120, 70);
this.ctx.font = "16px 黑体";
this.ctx.fillText("基础**", 120, 95);
this.ctx.font = "30px 黑体";
this.ctx.fillText("00%", 200, 80);
//===============================文字
},
},
mounted() {
// 页面进入时加载内容
this.initCanvas();
},
watch: {
// 监测变化
},
};
</script>
<style scoped lang="scss">
#canvas {
background-color: antiquewhite;
}
</style>
