canvas

2022-07-31 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";
【canvas】//绘制到画板中
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();
};

推荐阅读

上一篇：昨天日记

下一篇：外小春游记