JavaScript ---- Canvas扇形图封装
来源:互联网 发布:战舰世界基辅数据 编辑:程序博客网 时间:2024/05/01 17:21
//原型var Canvas = function(ele,num){this.ele = ele;this.num = num;this.ctx = this.ele.getContext("2d");this.color = ["#21a74f","#b3e5f1","#3498db","#2ecc71","#f1c40f","#e67e22"];this.draw();}Canvas.prototype.draw=function(){var j=0,j1=0,j2=0,angle=0;var sum=0;for(var i=0;i<this.num.length;i++){sum=sum+this.num[i];}for(var i=0;i<this.num.length;i++){j=2*Math.PI*this.num[i]/sum;j2=j1+j;this.ctx.beginPath();this.ctx.fillStyle=this.color[i];this.ctx.arc(this.ele.width/2,this.ele.height/2,120,j1,j2,false);this.ctx.lineTo(this.ele.width/2,this.ele.height/2);this.ctx.closePath();this.ctx.fill();angle=j1+j/2;j1=j1+j;}}//实例调用var ele1=document.getElementById("can1");var num1=[100,300,300,500,200];var ele2=document.getElementById("can2");var num2=[100,300,300];var can1 = new Canvas(ele1,num1);var can2 = new Canvas(ele2,num2);
0 0
- JavaScript ---- Canvas扇形图封装
- canvas绘画扇形图
- 使用canvas绘制扇形图
- canvas 画图扇形
- Unity 扇形UI 360Canvas
- html5 canvas元素扇形的绘制
- php扇形图
- HTML5 画扇形图
- UIBezierPath绘制扇形图
- 占百分比,扇形图
- 扇形图-可视化数据
- JavaScript canvas
- JavaScript之下雨效果制作--自己封装实例化对象结合canvas
- 封装canvas的插件-KineticJs
- javascript 封装
- javascript封装
- JavaScript 封装
- JavaScript封装
- 单位冲激函数(图)
- Otto进行事件分发(Activity 与Activity与Fragment之间传递数据)
- laravel framework 出错
- linux 六步安装mongodb
- H5_Node5_Canvas2_图形组合方式&图像的处理
- JavaScript ---- Canvas扇形图封装
- Java单例模式的几种方式
- Autolayout的Bottom Layout Guide问题
- Nginx安装+配置+启动(CentOS)
- An Introduction to Conditional Random Fields[条件随机场介绍]
- Spring中ClassPathXmlApplicationContext类的简单使用
- VC GPIB 实例
- oracle 11g 安装及netca,dbca乱码之解决
- 多线程一道小题