vue.js 利用canvas绘制简易仪表盘进度条

html代码

因为动画效果比较消耗性能，所以进度条单独canvas绘制

<template><div class="circle_box"><!-- 内容 --><div class="circleText"><div class="score">{{ score }}</div><div class="desc">您本次得分</div></div><!-- 进度条 --><canvas class="circle canvasArcCir" style="z-index: 3;"></canvas><!-- 大圆环 --><canvas class="circle canvasCircle" style="z-index: 2;"></canvas></div>
</template>

绘制灰色圆环

   drawLine() {//创建并返回绘图上下文context对象。//灰色圆环var el_circle = document.querySelector(".canvasCircle");el_circle.width = this.canvasWidth;el_circle.height = this.canvasWidth;var cxt_arc = el_circle.getContext("2d");//线条宽度cxt_arc.lineWidth = this.lineWidth;//线条颜色cxt_arc.strokeStyle = '#eaeaea';//线段两端为圆角cxt_arc.lineCap = 'round';cxt_arc.beginPath();//cxt_arc.arc(x,y,半径,开始端点,结束端点,顺时针)//arc绘制起点为时钟3点为起点，顺时针转0.8*Math.PI，对应的终点为2.8*Math.PI，需要两端对齐则终点为2.2*Math.PIcxt_arc.arc(this.canvasWidth / 2, this.canvasWidth / 2, this.canvasWidth / 2 - this.lineWidth * 3, 0.8 * Math.PI, 2.2 * Math.PI, false);cxt_arc.stroke();// 这里就是进度条的显示this.drawCirclePg();}

绘制进度条

   drawCirclePg() {//创建并返回绘图上下文context对象。var el_arcCir = document.querySelector(".canvasArcCir");el_arcCir.width = this.canvasWidth;el_arcCir.height = this.canvasWidth;var cxt_arc = el_arcCir.getContext("2d");var value = this.score / 100;    //得分占比var count = 0;var animation = () => {count += 0.01;// 清除上次绘画进度条cxt_arc.clearRect(0, 0, this.canvasWidth, this.canvasHeight);cxt_arc.lineWidth = this.lineWidth;// 颜色渐变-横向渐变var my_gradient = cxt_arc.createLinearGradient(0, 0, this.canvasWidth, 0);my_gradient.addColorStop(1, "#FF88CE");my_gradient.addColorStop(0, "orange");cxt_arc.strokeStyle = my_gradient;cxt_arc.lineCap = 'round';cxt_arc.beginPath();cxt_arc.arc(this.canvasWidth / 2, this.canvasWidth / 2, this.canvasWidth / 2 - this.lineWidth * 3, 0.8 * Math.PI, count * (1.4 * Math.PI) + 0.8 * Math.PI, false);cxt_arc.stroke();if (count >= value) {this.clearTime();}}this.varName = setInterval(animation, 30);}

完整代码

<template><div class="circle_box"><!-- 内容 --><div class="circleText"><div class="score">{{ score }}</div><div class="desc">您本次得分</div></div><!-- 进度条 --><canvas class="circle canvasArcCir" style="z-index: 3;"></canvas><!-- 大圆环 --><canvas class="circle canvasCircle" style="z-index: 2;"></canvas></div>
</template><script>export default {data() {return {varName: null,score: 80,canvasWidth: 470,canvasHeight: 470,lineWidth: 16};},mounted() {this.drawLine();},beforeDestroy() {this.clearTime();},methods: {//清空定时器clearTime() {if (this.varName) {clearInterval(this.varName);}},drawLine() {//创建并返回绘图上下文context对象。//灰色圆环var el_circle = document.querySelector(".canvasCircle");el_circle.width = this.canvasWidth;el_circle.height = this.canvasWidth;var cxt_arc = el_circle.getContext("2d");//线条宽度cxt_arc.lineWidth = this.lineWidth;//线条颜色cxt_arc.strokeStyle = '#eaeaea';//线段两端为圆角cxt_arc.lineCap = 'round';cxt_arc.beginPath();//cxt_arc.arc(x,y,半径,开始端点,结束端点,顺时针)//arc绘制起点为时钟3点为起点，顺时针转0.8*Math.PI，对应的终点为2.8*Math.PI，需要两端对齐则终点为2.2*Math.PIcxt_arc.arc(this.canvasWidth / 2, this.canvasWidth / 2, this.canvasWidth / 2 - this.lineWidth * 3, 0.8 * Math.PI, 2.2 * Math.PI, false);cxt_arc.stroke();// 这里就是进度条的显示this.drawCirclePg();},drawCirclePg() {//创建并返回绘图上下文context对象。var el_arcCir = document.querySelector(".canvasArcCir");el_arcCir.width = this.canvasWidth;el_arcCir.height = this.canvasWidth;var cxt_arc = el_arcCir.getContext("2d");var value = this.score / 100;    //得分占比var count = 0;var animation = () => {count += 0.01;// 清除上次绘画进度条cxt_arc.clearRect(0, 0, this.canvasWidth, this.canvasHeight);cxt_arc.lineWidth = this.lineWidth;// 颜色渐变-横向渐变var my_gradient = cxt_arc.createLinearGradient(0, 0, this.canvasWidth, 0);my_gradient.addColorStop(1, "#FF88CE");my_gradient.addColorStop(0, "orange");cxt_arc.strokeStyle = my_gradient;cxt_arc.lineCap = 'round';cxt_arc.beginPath();cxt_arc.arc(this.canvasWidth / 2, this.canvasWidth / 2, this.canvasWidth / 2 - this.lineWidth * 3, 0.8 * Math.PI, count * (1.4 * Math.PI) + 0.8 * Math.PI, false);cxt_arc.stroke();if (count >= value) {this.clearTime();}}this.varName = setInterval(animation, 30);},}
};</script><style scoped lang='scss'>.circle_box {width: 470px;height: 470px;position: absolute;margin: auto;left: 0;top: 0;right: 0;bottom: 0;box-sizing: border-box;
}.circle {position: absolute;left: 0;right: 0;margin: auto;width: 100%;height: 100%;
}.circleText {text-align: center;position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: auto;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;.score {color: #FF7600;font-size: 80px;}.desc {font-size: 30px;}
}</style>

vue.js 利用canvas绘制仪表盘圆环进度条-带动画相关推荐

uni-app中自定义图表（canvas实现chart图表）开发篇（5）-圆环进度条添加动画效果
这里增加一篇介绍下进度条动画效果如何添加,前几篇的进度值被修改后,切换效果比较生硬.另外也在第四篇基础上,对图形略作修改.在查看uniapp文档时,没有发现重绘执行函数,小程序中有Canvas.req ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
java如何画百分比圆环_canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式贴上代码,仅供参考 /** * L ...
使用canvas绘制圆环进度条
使用canvas绘制圆环进度条技术要求需要一点点数学基础需要对 canvas 的常见的方法熟悉一点点数学基础已知圆心,半径,角度,求圆上的点坐标 canvas 常见的方法菜鸟教程扬帆起航 ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
php绘制正方体,Three.js利用顶点绘制立方体方法
本文主要给大家介绍了关于Three.js利用顶点绘制立方体的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧.希望能帮助到大家. 前言之前我们在学些WebGL基础的时候 ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！)
canvas线条背景(抽象画布可视化,利用canvas绘制多条线条,再利用多条线条同时动态发生改变,形成一幅美妙的动态图,非常惊艳!) 动态变化中的静态截图 <!doctype html> ...

vue.js 利用canvas绘制仪表盘圆环进度条-带动画

vue.js 利用canvas绘制简易仪表盘进度条

html代码

绘制灰色圆环

绘制进度条

完整代码

vue.js 利用canvas绘制仪表盘圆环进度条-带动画相关推荐

最新文章

热门文章