一个canvas百分比圆盘插件

这篇博客分享了作者封装的一个使用canvas绘制的百分比圆盘插件,旨在应对领导提出的web3d需求。文章中,作者展示了如何创建圆盘、画刻度、写文字和显示百分比的功能,但遇到动画部分的实现困扰,期待得到读者的指导。
摘要由CSDN通过智能技术生成

最近我们领导要搞web3d,发了一些关于3DJS引擎的博客给我看。一问需求,要把公司大楼用web3d展现出来。惊出一身冷汗,慢慢学吧。只好把之前写过一个canvas百分比的圆盘插件拿出来封装了一下压压惊。
写了一个小时,动画还是没想好怎么写,思路有点爆炸,求大神指点啊。
效果图
在这里插入图片描述
不废话直接上代码

<canvas width="300" height="300"></canvas>
<canvas width="300" height="300"></canvas>

运行函数

var canvas = new DrawDisk({
	    element:'canvas',
		 num:[75,80],
		// text:['javaScript'],
		bgColor:'#fff',
		scaleColor:'black',
		whiteColor:'rgba(151,187,205,0.5)',
		pointColor:rgba(30,90,250,0.5)'
	})
	 canvas.draw();

构造函数

function DrawDisk(ele){
		this.element = ele.element; //获取dom
		this.num = ele.num || [60]; //获取百分比number的值
		this.text = ele.text || [
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值