Question

HTML5画圆，且每个圆之间隔一个半圆，重复多次

Answer 1

不使用任何js就可以实现，兼容各个主要浏览器，ie8以下除外
html结构
<ul class='cirBox'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
css结构
<style>
.cirBox li{ float:left; border-radius:50%; width:100px; height:100px; background-color:#F00;}
.cirBox li:nth-of-type(even){width:50px;border-radius:100px 0 0 100px; }/*获取偶数项li 并设置为半圆*/

</style>

Answer 2

简单写了一个
<canvas id="circles" width="500" height="500"></canvas>
<script>
var canvas=document.querySelector("#circles");
var cts=canvas.getContext("2d");
var colors=["red","blue","green","orange","black"];

for(var i=1;i<6;i++){
cts.beginPath();
cts.arc(40*i+20,40,40,0,Math.PI*2);
cts.fillStyle=colors[i-1];
cts.closePath();
cts.fill();
}

</script>