canvas

window.onload=function() {

//圆环对象

functionCycle(opts) {

this.id=opts.id;

this.width=opts.width;

this.border=opts.border;

this.height=opts.height;

this.bgcolor=opts.bgcolor;

this.pcolor=opts.pcolor;

this.textcolor=opts.textcolor;

this.percent=opts.percent;

};

//动态扩展内置方法

Cycle.prototype={

constructor: Cycle,//声明指向构造器

init:function() {

//创建画布对象

varhtml="";

document.getElementById(this.id).innerHTML=html;

//初始化事件和参数

this.setOptions();

//setTimeout(that.setOptions(), 25);

},

//设置参数

setOptions:function() {

//获取画布对象

varcanvas=document.getElementById("canvas_"+this.id);

//获取画布的上下文

varcontext=canvas.getContext("2d");

varw=this.width;

varh=this.height;

vardeg=this.percent;

varcradius=w/2-this.border;

//清除画布

context.clearRect(0,0, w, h);

//开始绘画

context.beginPath();

//设置圆的边框

context.lineWidth=this.border;

//绘制边框的颜色

context.strokeStyle=this.bgcolor;//实心用fillstyle对应的方法是fill()

//绘制圆

context.arc(w/ 2, h /2, cradius,0.7*Math.PI,0.3*Math.PI,false);

//加入圆帽

context.lineCap="round";

//绘制到画板中

context.stroke();

//计算一个角度对应弧度是多少

vard=deg*3.6/180*Math.PI;

//重新绘制

context.beginPath();

//设置圆的边框

context.lineWidth=this.border;

//绘制边框的颜色

context.strokeStyle=this.pcolor;

//绘制圆

context.arc(w/ 2, h /2, cradius,-Math.PI/ 0.7, d - Math.PI /0.7);

//创建一个线性渐变

vargradient=context.createLinearGradient(0,100,100,10);

//定义绿色渐变色

gradient.addColorStop(0,"#3fccc7");

//定义蓝色渐变色

gradient.addColorStop(1,"#3fcc9f");

//设置fillStyle为当前的渐变对象

context.strokeStyle=gradient;

//绘制到画板中

context.stroke();

context.closePath();

//重新绘制

context.beginPath();

//设置圆的边框

context.lineWidth='10';

//绘制边框的颜色

context.strokeStyle='#FFFFFF';

//绘制圆

context.arc(w/ 2, h /2, cradius,d-Math.PI/ 0.7-0.001, d - Math.PI /0.7);

//设置fillStyle为当前的渐变对象

context.strokeStyle='#FFFFFF';

//绘制到画板中

context.stroke();

context.closePath();

//文字

context.beginPath();

//字体颜色

context.fillStyle=this.textcolor;

//字体样式

context.font="28px 微软雅黑"

var text=deg+"%";

//获取文字宽度

vartextWidth=context.measureText(text).width;

//绘制文字fillText("百分比",x,y);

context.fillText(text, w/ 2 - textWidth /2, h/2+14);

context.closePath();

context.restore();

}

};

newCycle({

id:"cycle1",

width:240,//宽度

height:240,//高度

border:20,//边框

percent:80,//百分比

bgcolor:"#e5f1fd",//背景颜色

pcolor:"pink",//边框颜色

textcolor:"#111"//字体颜色

}).init();

};