vue动态绘制四分之三圆环图效果


Posted in Javascript onSeptember 03, 2019

参照网上的一个案例“参照的为绘制的是一个动态的圆环”,现在我的需求是改编成四分之三的圆环

实现效果:

vue动态绘制四分之三圆环图效果

样式展示 canvas绘图基本操作设置就可以

参考源代码链接:原文:https://3water.com/html5/682215.html

> 引用的上文源代码进行修改,注意几点

1. 理解绘制圆环的原理,是根据弧度进行绘制
2. 弧度的计算公式
3. 每一角度转换成弧度
4. 起点和终点的坐标

> 自己画个图,方便理解!

vue动态绘制四分之三圆环图效果

首先根据图可以看到起点和重点,看坐标知道起点是-240度,这个正负还是要区分的,每一弧度的计算公式

将角度转换为弧度:

var radians = degrees * (Math.PI/180);

这样就可以进行改版了

改版之后的代码

`drawMain(drawing_elem, percent, forecolor, bgcolor,fillColor) {
/*
@drawing_elem: 绘制对象
@percent:绘制圆环百分比, 范围[0, 100]
@forecolor: 绘制圆环的前景色,颜色代码
@bgcolor: 绘制圆环的背景色,颜色代码
*/
var context = drawing_elem.getContext('2d')
var center_x = drawing_elem.width / 2;
var center_y = drawing_elem.height / 2;
var rad = Math.PI/3*5/100; //绘制的为300度的圆
// 65 * Math.PI / 180, 115 * Math.PI / 180
// var speed = 0;

// 绘制背景圆圈
function backgroundCircle(){
context.save();
context.beginPath();
context.lineWidth = 8; //设置线宽
var radius = center_x - context.lineWidth;
context.lineCap = "round";
context.strokeStyle = bgcolor;
context.arc(center_x, center_y, radius,-Math.PI/180*240, Math.PI/180*60, false);
**起点,终点,半径,开始点,结束点,是否顺/逆时针**
context.stroke();
context.closePath();
context.restore();
}

//绘制运动圆环
function foregroundCircle(n){
context.save();
context.strokeStyle = forecolor;
context.lineWidth = 8;
context.lineCap = "round";
var radius = center_x - context.lineWidth;
// console.log(endAngle)
context.beginPath();
context.arc(center_x, center_y, radius ,-Math.PI/180*240 ,-Math.PI/180*240+n*rad , false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
context.stroke();
context.closePath();
context.restore();
}

//绘制文字
function text(n){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.fillStyle = fillColor;
var font_size = 20;
context.font = font_size + "px Helvetica";
var text_width = context.measureText(n.toFixed(0)+"%").width;
context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
context.restore();
}

//执行动画
(function drawFrame(){
// 去掉动画加载效果
// window.requestAnimationFrame(drawFrame);
// context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
backgroundCircle();
text(percent);
foregroundCircle(percent);
**// 去掉动画加载效果,这两行代码,由于网速加载慢的时候绘制的比较慢,动态效果绘制的太缓慢,所以去掉了**
// if(speed >= percent) return;
// speed += 1;
}());
},

 接下来就是调用该方法了,调用的时候放到了nextTick中,当时遇到的问题就是加载只能加载第一个,下面的加载不出来,自我感觉加载顺序的问题,绘制了但是没渲染出来

this.$nextTick(()=>{
for(var i =0;i<this.couponCenterLists.length;i++) {
this.childrenTag = document.getElementById("time-graph-canvas"+i);
let score = this.couponCenterLists[i].couponPercentage * 100;
this.drawMain(this.childrenTag, score, "#fff", "rgba(255,255,255,0.4)","#fff");
**score变量是我从接口取出来的数据存到了score变量中**
}
})

总结

以上所述是小编给大家介绍的vue动态绘制四分之三圆环图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 #Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 #Javascript
JavaScript Array对象基本方法详解
Sep 03 #Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 #Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 #Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 #Javascript
You might like
phpinfo 系统查看参数函数代码
2009/06/05 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
python素数筛选法浅析
2018/03/19 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
家长评语和期望
2014/02/10 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
中等生评语大全
2014/05/04 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
信用卡催款律师函
2015/05/27 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
高一语文教学反思
2016/02/16 职场文书