- 先给出代码
<canvas id="drawing" width="200px" height="200px"></canvas>
<script type="text/javascript">
var drawing=document.getElementById("drawing");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.beginPath();
context.arc(100,100,99,0,2*Math.PI,false);
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
context.moveTo(100,100);
context.lineTo(100,15);
context.moveTo(100,100);
context.lineTo(35,100);
context.stroke();
}
</script>
上面代码的结果是:
- 使用画布(canvas标签)而非div标签
<canvas>...</canvas>
- 不能通过style属性设置宽度和高度,否则出现的会是不全的椭圆形
<canvas id="drawing" style="width: 200px;height: 200px;background-color: aqua"></canvas>
上面的代码则是如此:
画第一条路径时候,不需要定位。
最后记得描边
context.stroke();