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

ゝ一纸荒年。 2022-09-19 12:03 22阅读 0赞

<!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:结合绘制实体圆和边框圆的方法与过程,只是在绘制第二个圆时,改变了圆心的横坐标距离.