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

html实心点和空心点怎么打出来的,第1张

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

复制代码代码如下:

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()

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

ul

{

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

}

li{

padding-left:20px

}


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

原文地址: https://outofmemory.cn/zaji/6093980.html

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

发表评论

登录后才能评论

评论列表(0条)

保存