[workingNotes]使用html5画实心圆的两种方法

最新推荐文章于 2024-12-04 16:19:57 发布

原创最新推荐文章于 2024-12-04 16:19:57 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了在HTML5中使用CSS和Canvas+JS两种方式实现实心圆的绘制。通过CSS，可以直接设置样式完成；而Canvas则需要添加标签并利用JavaScript进行绘制，注意颜色需用background而非color。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个很简单的任务，搞了三天。关键是对项目上使用的extjs不熟悉，本来想通过其监听器listener: afterlayout和afterrender，调用js来渲染画出实心圆，但是对页面加载顺序没有搞清楚，导致每次只有调整浏览器大小，强制页面渲染，才能显示出来效果。

记录一下通过html中的css或者js来实现实心圆的两种方法：

1. css实现

直接通过下列css代码即可完成：

<span style="white-space:pre">	border-radius:50%; </span>

</pre><pre name="code" class="css"><span style="white-space:pre">	width:13px; </span>

<span style="white-space:pre">	height:13px;</span>

<span style="white-space:pre">	background:</span>#008000;

添加到css中或者直接使用html的style属性即可。注意：background表示颜色，不能使用color

2. canvas标签加js实现

在需要添加实心圆的地方添加canvas标签：

<span style="white-space:pre">	</span><canvas id="myCanvas" height="13px" weight="10px" name="statusStr"></canvas>

然后通过js代码实现：

<span style="white-space:pre">	</span>function(){
		var c=document.getElementsByTagName("canvas");
		for(var i=0; i<c.length; i++){
			var cxt = c[i].getContext("2d");
			cxt.fillStyle='#008000';
	    	<span style="white-space:pre">	</span>cxt.beginPath();
	    	<span style="white-space:pre">	</span>cxt.arc(6,6,6,0,Math.PI*2,true);
	    	<span style="white-space:pre">	</span>cxt.closePath();
	    	<span style="white-space:pre">	</span>cxt.fill();
		}
	}