在网页文件里画圆

IT行业中网页是所有人都会接触到的东西，尤其是UI，而网页中包含各种各样的图像，今天我将总结的在网页中画圆的方法分享给大家

工具/原料

一个可以编辑网页的编辑器

方式一、用纯CSS创建

1、首先新建一个网页文件

3、然后给circle类定义样式

方式二、用svg创建

1、首先创建一个新的网页文件

3、这样svg方式画圆就完成了，svg方式画圆虽然代码简短，但需要对svg画图比较熟练

方式三、用canvas创建

1、首先新建一个网页文件

3、然后用js获取canvas并进行配置，代码如下：<script type屏顿幂垂="text/javascript&鳎溻趄酃quot;> var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); context.strokeStyle='black'; context.lineWidth=5; context.beginPath(); context.arc(60, 60, 50, 0, 2*Math.PI, true); context.fillStyle="red"; context.fill(); context.stroke();</script>