HTML 画圆问题_随笔

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

var canvas=document.getElementById('myCanvas')

var ctx=canvas.getContext('2d')

//ctx.clearRect(0,0,width,height)

ctx.beginPath()

ctx.strokeStyle="black"

ctx.arc(250,0,100,0,Math.PI,false)

ctx.stroke()

ctx.fillStyle='black'

ctx.fill()

</script>

</body>

</html>

稍微改动一下就好了，canvas最好放js前面，而且你的代码里canvas标签没闭合，

arc里最后一个参数改为false，也就是顺时针画圆。你的是true逆时针画，画到canvas顶部外面了，当然看不到

1、在HTML中设置圆角边框有两种常见的方式。

2、一种设置圆角的方式是使用图片。把输入框设置为无边框模式，然后显示背景图，背景图里画一个圆角边框即可。

3、另一种设置圆角的方式是设置border-radius属性，border-radius即为圆角边框属性，但是IE9之前的版本是不支持这个属性的。

4、希望对你有帮助。

设计师

</div>

要做一个圆圈，首先要做一个正方形的div，然后加上border边框，边框要用border-radius圆角，当圆角像素等于div长宽的一半时，就变成了一个圆形边框

中间的文字用line-height和text-align上下左右居中

还有那个箭头应该是图片来的，可以当背景图片插入，这个我就不写了

欢迎分享，转载请注明来源：内存溢出

HTML 画圆问题