怎么在html5画多个圆,HTML5之通过arc方法绘制多个不同样式的圆

通过arc方法绘制多个不同样式的圆

实体圆

边框圆

衔接圆

function $(id){

return document.getElementById(id);

}

/*

绘制实体圆

*/

function span1_click(){

var  cnv = $("cMain");

var cxt = cnv.getContext("2d");

//清除画布原有图形

cxt.clearRect(0,0,280,190);

//画实体圆

cxt.beginPath();

cxt.arc(100,100,50,0,Math.PI*2,true);

cxt.closePath();

//设置填充的背景色

cxt.fillStyle="#666";

//进行填充

cxt.fill();

}

/*

绘制边框圆

*/

function span2_click(){

var  cnv = $("cMain");

var cxt = cnv.getContext("2d");

//清除画布原有图形

cxt.clearRect(0,0,280,190);

//画边框圆

cxt.beginPath();

cxt.arc(100,100,50,0,Math.PI*2,true);

cxt.closePath();

//设置填充的背景色

cxt.fillStyle="#666";

//设置边框宽度

cxt.lineWidth=2;

//进行描边

cxt.stroke();

}

/*

绘制衔接圆

*/

function span3_click(){

var  cnv = $("cMain");

var cxt = cnv.getContext("2d");

//清除画布原有图形

cxt.clearRect(0,0,280,190);

//画圆

cxt.beginPath();

cxt.arc(100,100,50,0,Math.PI*2,true);

cxt.closePath();

//填充的背景色

cxt.fillStyle="#eee";

//进行填充

cxt.fill();

//设置边框色

cxt.strokeStyle="#666";

//设置边框宽度

cxt.lineWidth=2;

//进行描边

cxt.stroke();

//开始画衔接的边框圆

cxt.beginPath();

cxt.arc(175,100,50,0,Math.PI*2,true);

cxt.closePath();

//设置边框颜色

cxt.strokeStyle="#666";

//设置边框宽度

cxt.lineWidth=2;

//进行描边

cxt.stroke();

}

自定义函数解析1:当用户点击"实体圆"时,将调用自定义函数span1_click(),在该函数中:首先,通过获取的上下文环境对象cxt来调用clearRect()方法,清空原有画布中的图形，放置图形在画布中的交叉展示;然后，调用arc()方法绘制一个圆的路径,圆心坐标为(100,100),半径为50像素,弧度从0开始到Math.PI*2结束、按顺时针方向进行绘制,路径绘制完成之后,填充背景颜色;最后使用fill()方法将颜色填充至已绘制的图形中,从而在画布中绘制一个实体圆

自定义函数解析2:绘制圆的路径与绘制实体圆的方法一致,只是最后在绘制图形的时候使用stroke()方法对路径进行描边,而不是绘制实体圆中的fill()方法。在进行描边之前,通过lineWidth和strokeStyle属性分别设置边框圆的宽度和颜色,最后使用strkoe()方法,按照设置的宽度和颜色对已绘制的图路径进行描边

自定义函数解析3:结合绘制实体圆和边框圆的方法与过程,只是在绘制第二个圆时,改变了圆心的横坐标距离.