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

HTML5画圆,且每个圆之间隔一个半圆,重复多次,第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:leftborder-radius:50%width:100pxheight:100pxbackground-color:#F00}

.cirBox li:nth-of-type(even){width:50pxborder-radius:100px 0 0 100px}/*获取偶数项li 并设置为半圆*/

</style>

cxt.arc(100,100,30,0,Math.PI*2,true)括号内第一个和第二个参数,代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线,分别是0.5 PI(正下方),1 PI和1.5 PI(正上方),为画饼图提供了扇形范围的依据。 第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆。第六个参数是一个布尔值,true是顺时针false是顺时针。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7019057.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存