<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通过arc方法绘制多个不同样式的圆</title>
</head>
<body>
<div>
<p>
<span onClick="span1_click()">实体圆</span>
<span onClick="span2_click()">边框圆</span>
<span onClick="span3_click()">衔接圆</span>
<canvas id="cMain" width="280px" height="190px"></canvas>
</p>
</div>
</body>
<script type="text/javascript">
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();
}
</script>
</html>
自定义函数解析1:当用户点击"实体圆"时,将调用自定义函数span1_click(),在该函数中:首先,通过获取的上下文环境对象cxt来调用clearRect()方法,清空原有画布中的图形,放置图形在画布中的交叉展示;然后,调用arc()方法绘制一个圆的路径,圆心坐标为(100,100),半径为50像素,弧度从0开始到Math.PI*2结束、按顺时针方向进行绘制,路径绘制完成之后,填充背景颜色;最后使用fill()方法将颜色填充至已绘制的图形中,从而在画布中绘制一个实体圆
自定义函数解析2:绘制圆的路径与绘制实体圆的方法一致,只是最后在绘制图形的时候使用stroke()方法对路径进行描边,而不是绘制实体圆中的fill()方法。在进行描边之前,通过lineWidth和strokeStyle属性分别设置边框圆的宽度和颜色,最后使用strkoe()方法,按照设置的宽度和颜色对已绘制的图路径进行描边
自定义函数解析3:结合绘制实体圆和边框圆的方法与过程,只是在绘制第二个圆时,改变了圆心的横坐标距离.