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

Posted 2023-03-28

参考技术A <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> 参考技术B 不使用任何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> 参考技术C 可以通过CSS3里的border-radius属性设置弧边！

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

不使用任何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> 参考技术A 简单写了一个
<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>本回答被提问者和网友采纳