vue+canvas 手繪進度條動畫(不喜勿噴)
明確步驟
1.劃一個矩形碑定，加上文字效果
2.判斷新值和現(xiàn)有值大小比較纷纫，并算出一份占矩形的長度
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, //總數(shù)
now: "", //現(xiàn)數(shù)
oldNumber: 0, //老值
newNumber: 0, //新值
proportion: "", //占比,
};
},
created() {
// 實例被創(chuàng)建之后執(zhí)行代碼
},
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: {
// 監(jiān)測變化
},
};
</script>
<style scoped lang="scss">
#canvas {
background-color: antiquewhite;
}
</style>
