canvas画圆的几个关键点

• 先给出代码

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