vue中用canvas画移动端电量显示实现充电动画

写一个电量组件

battery.vue

<template><div><canvas ref="mycanvas" :width="cWidth" :height="cHeight"></canvas></div>
</template><script>
export default {name: 'battery',mycanvas: null,ctx: null,myInterval: null,props: {proQuantity: {type: Number,default: 50},proIsCharge: {type: Boolean,default: false}},data () {return {cWidth: 66,cHeight: 28,jd: 0}},created () {},watch: {// 监听是否变化电量 ，如果是 做一个充电动画proIsCharge (newVal, oldVal) {console.log('======proIsCharge============', newVal)let _this = thisclearInterval(_this.myInterval)this.jd = 0if (_this.proIsCharge) {_this.myInterval = setInterval(function () {_this.drawCharge()}, 300)}}},mounted () {this.mycanvas = this.$refs.mycanvasthis.ctx = this.mycanvas.getContext('2d')this.drawBg()this.drawPath(this.proQuantity)},methods: {// 画一个背景drawBg () {this.ctx.strokeStyle = 'rgba(255,255,255,1)'this.ctx.lineWidth = 2this.ctx.strokeRect(0, 0, 60, 28)this.ctx.fillStyle = 'rgba(0,0,0,0.2)'this.ctx.fillRect(0, 0, 60, 28)this.ctx.fillStyle = 'rgba(255,255,255,1)'this.ctx.fillRect(61, 7, 6, 14)},// 根据电量画出一个块drawPath (quantity) {if (this.proIsCharge) {this.ctx.fillStyle = 'green'} else if (quantity < 20) {this.ctx.fillStyle = 'red'} else {this.ctx.fillStyle = 'green'}this.ctx.fillRect(1, 1, (60 - 2) * quantity / 100, 26)},drawCharge () {this.ctx.clearRect(0, 0, this.cWidth, this.cHeight)this.drawBg()this.jd = this.jd + 10if (this.jd > 100) {this.jd = 0}this.drawPath(this.jd)}}
}
</script><style scoped></style>

主页面引用
比较简单

<battery style=" width: 90px;height: 30px;" :proIsCharge="IsCharge" :proQuantity="batteryEnegy"></battery>

更改batteryEnegy显示电量值充电时更改IsCharge为true

效果图

vue中用canvas画移动端电量显示实现充电动画相关推荐

vue中用canvas实现移动端手写板、电子签名功能
html部分: js部分: css部分:
新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
html画圆圈原理,【已解决】HTML中用Canvas画圆圈
折腾: [未解决]vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图期间,再去canvas中圆圈如图: 希望画出大大小小的各种圆圈包括圆圈里面还带东西的.c ...
在小程序中用canvas画一个仪表盘
本意是打算写一个类似f2的半圆进度条,但是感觉小程序中引入太难调了,所以就自己用canvas随便画了一个实现了类似的效果. 最终效果图 wxml <view class="top-bo ...
vue使用canvas画图画不出来
使用vue做一个手势密码,相当于手机图案解锁 canvas要占全屏所以获取宽高赋值使用canvas画图,绘制图案代码 <template><div id="handlo ...
移动端html5手写板,Vue利用canvas实现移动端手写板的方法
清除保存 Canvas画板 var draw; var preHandler = function(e){e.preventDefault();} class Draw { constructor( ...
canvas画奥运五环 2019/10/29
在HbuilderX中用canvas画一个奥运五环. 先用arc画出五个圆环,画布是后画的图形在顶层,再根据圆环相互串压的顺序,新添同心圆笔画,就能画出五环相互勾连的样子了. 基本完成任务,效果简陋, ...
06.MTK关机充电动画显示
关机充电的第一张logo: /vendor/mediatek/proprietary/bootable/bootloader/lk/dev/logo/rules.mk RESOURCE_OBJ_LIS ...
移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...

vue中用canvas画移动端电量显示实现充电动画

vue中用canvas画移动端电量显示实现充电动画相关推荐

最新文章

热门文章

vue中用canvas画移动端电量显示 实现充电动画

vue中用canvas画移动端电量显示 实现充电动画相关推荐

最新文章

热门文章

vue中用canvas画移动端电量显示实现充电动画

vue中用canvas画移动端电量显示实现充电动画相关推荐