html实心点和空心点怎么打出来的

的时候做的画空心圆与实心圆的练习题，非常简单。

复制代码代码如下:

var canvas=document.getElementById("canvas")

var cxt=canvas.getContext("2d")

//画一个空心圆

cxt.beginPath()

cxt.arc(200,200,50,0,360,false)

cxt.lineWidth=5

cxt.strokeStyle="green"

cxt.stroke()//画空心圆

cxt.closePath()

//画一个实心圆

cxt.beginPath()

cxt.arc(200,100,50,0,360,false)

cxt.fillStyle="red"//填充颜色,默认是黑色

cxt.fill()//画实心圆

cxt.closePath()

//空心和实心的组合

cxt.beginPath()

cxt.arc(300,300,50,0,360,false)

cxt.fillStyle="red"

cxt.fill()

cxt.strokeStyle="green"

cxt.stroke()

cxt.closePath()

html5在实心圆写文字的方法如下：

1、创建一个画布，设置宽度和高度。

2、获取到元素，varcanvas=document.getElementById("canvas")。

3、创建context对象，varctx=canvas.getContext("2d")。

4、设置绘制文本的字体和字体大小，ctx.font="40px微软雅黑"。

5、在画布上绘制实心的文本，其中三个参数含义是：第一个是绘制的文本，第二个是绘制文本横坐标起始坐标，第三个是纵坐标的起始坐标，ctx.fillText("HTML5"，200，200)。

实心圆大小需要使用图片来代替,与文字的距离使用padding-left

ul

{

list-style-image:url("/i/arrow.gif")

}

li{

padding-left:20px

}

---