<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
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顶部外面了，当然看不到
<div style="width:100pxheight:100pxborder:1px solid redborder-radius:50pxline-height:100pxtext-align:centercolor:red">设计师
</div>
要做一个圆圈，首先要做一个正方形的div，然后加上border边框，边框要用border-radius圆角，当圆角像素等于div长宽的一半时，就变成了一个圆形边框
中间的文字用line-height和text-align上下左右居中
还有那个箭头应该是图片来的，可以当背景图片插入，这个我就不写了
1、在HTML中设置圆角边框有两种常见的方式。2、一种设置圆角的方式是使用图片。把输入框设置为无边框模式，然后显示背景图，背景图里画一个圆角边框即可。
3、另一种设置圆角的方式是设置border-radius属性，border-radius即为圆角边框属性，但是IE9之前的版本是不支持这个属性的。
4、希望对你有帮助。
