HTML5之Canvas绘图——半圆与圆弧的不同画法

昨天写的博客中，写到了HTML5中使用Canvas画圆的方法，昨晚试了一下画一个笑脸，其实挺简单的，就是两个实心圆做眼睛，一个半圆弧做嘴，这个简单的笑脸就完成了，但是在做嘴的时候开始出现了问题：

DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvastitle>
 head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 style>
 <script type="text/Javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$(\'can\');
        var cans = can.getContext(\'2d\');
        cans.beginPath();
        cans.arc(400,300,200,0,Math.PI,1);
        cans.closePath();
        cans.strokeStyle = \'red\';
        cans.lineWidth = 10;
        cans.stroke();
    }
 script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px">canvas>
body>
html>

这几天正在看一本书——陶国荣的《HTML5实战》，这本书里的一个笑脸实例让我顿悟，方法更是简单的让我汗颜啊~~~

先看效果，再上代码

DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvastitle>
 head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 style>
 <script type="text/Javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$(\'can\');
        var cans = can.getContext(\'2d\');
        cans.beginPath();
        cans.arc(400,300,200,0,Math.PI,1);
        cans.strokeStyle = \'red\';
        cans.lineWidth = 10;
        cans.stroke();
        cans.closePath();
    }
 script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px">canvas>
body>
html>