canvas画圆百分比显示
代码如下，由于canvas还是不太熟悉，还有很多欠缺，希望大家多提意见，谢谢
1 function DrawArc(id,opations){ 2 this.canvas = document.getElementById(id); 3 this.context = this.canvas.getContext('2d'); 4 this.c_width = opations.width; 5 this.c_height = opations.height; 6 this.value = opations.value; //当前圆值 7 this.average = opations.average;//平均值，用于判断当前圆状态 8 this.maxpercent = opations.maxpercent || 100;//最大百分比，可设置 9 this.color = opations.color; //顏色 10 this.text = opations.text; 11 this.t = null; 12 this.init(); 13 } 14 DrawArc.prototype = { 15 init:function(){ 16 this.canvas.width = this.c_width; 17 this.canvas.height = this.c_height; 18 var color = null; 19 this.context.clearRect(0, 0, this.c_width, this.c_height); 20 this.context.beginPath(); 21 this.context.moveTo(this.c_width/2, this.c_height/2); 22 // // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2，起始点0，终止点为Math.PI * 2的 整圆 23 this.context.arc(this.c_width/2, this.c_height/2, this.c_width/2>this.c_height/2?this.c_height/2:this.c_width/2, 0, Math.PI * 2, false); 24 this.context.closePath(); 25 this.context.fillStyle = "#ddd"; //填充颜色 26 this.context.fill(); 27 if(this.value < this.average){ 28 color = this.color[0] 29 }else if(this.value == this.average){ 30 color = this.color[1] 31 }else{ 32 color = this.color[2] 33 } 34 // 绘制内圆 35 this.context.beginPath(); 36 this.context.strokeStyle = color; 37 this.context.lineCap = "square"; 38 this.context.closePath(); 39 this.context.fill(); 40 this.context.lineWidth = this.c_width>this.c_height?5:10;//绘制内圆的线宽度 41 this.loadCanvas(color); 42 }, 43 draw:function(color,cur){ 44 // 画内部空白 45 this.context.beginPath(); 46 this.context.moveTo(24, 24); 47 this.context.arc(this.c_width/2, this.c_height/2, this.c_width/2>this.c_height/2?(this.c_height-10)/2:(this.c_width/2-10), 0, Math.PI * 2, true); 48 this.context.closePath(); 49 this.context.fillStyle = 'rgba(255,255,255,1)'; // 填充内部颜色 50 this.context.fill(); 51 // 画内圆 52 this.context.beginPath(); 53 // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠， 54 // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离 55 this.context.arc(this.c_width/2, this.c_height/2, this.c_width/2>this.c_height/2?(this.c_height-5)/2:(this.c_width/2-5), -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false); 56 this.context.stroke(); 57 //在中间写字 58 this.context.font = "bold "+(this.c_width>=this.c_height?(this.c_height/8):(this.c_width/8))+"pt Arial"; // 字体大小，样式 59 this.context.fillStyle = color; // 颜色 60 this.context.textAlign = 'center'; // 位置 61 this.context.textBaseline = 'middle'; 62 this.context.moveTo(this.c_width/2, this.c_height/2); // 文字填充位置 63 this.context.fillText((cur.toFixed(2)), this.c_width/2, this.c_height/2-(this.c_width/2>this.c_height?this.c_height/8:this.c_width/8)); 64 this.context.fillText(this.text, this.c_width/2,this.c_height/2+(this.c_width/2>this.c_height?this.c_height/8:this.c_width/8)); 65 }, 66 loadCanvas:function(color){ 67 var self = this; 68 var n = 0; 69 self.t = setInterval(function(){ 70 if(n > (self.value/100)){ 71 clearInterval(self.t); 72 }else{ 73 n += 0.01; 74 self.draw(color,n); 75 } 76 },15); 77 } 78 } 79 var a1 = new DrawArc("myCanvas",{ 80 width:100, 81 height:100, 82 value:45, 83 average:50, 84 color : ["#ff6100","#27b5ff","#29c9ad"], 85 text : "过关率" 86 })
html代码只需要一个canvas传一个id即可。
