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

来源：互联网发布：淘宝水果属于什么类目编辑：程序博客网时间：2024/06/06 01:37

一个很简单的任务，搞了三天。关键是对项目上使用的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();}}

0 0