HTML5之Canvas繪圖——半圓與圓弧的不同畫法

本文轉載自查看原文 2012-11-27 14:28 16699 前端開發/ HTML5 Canvas 半圓圓弧/ 我的夢想/ 項目開發

昨天寫的博客中，寫到了HTML5中使用Canvas畫圓的方法，昨晚試了一下畫一個笑臉，其實挺簡單的，就是兩個實心圓做眼睛，一個半圓弧做嘴，這個簡單的笑臉就完成了，但是在做嘴的時候開始出現了問題：

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </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>Canvas</title>
 </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>

OK啦，這樣就可以實現我那個的笑臉的嘴了~~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5 canvas 在線畫筆繪圖工具（一） HTML5之Canvas繪圖——Canvas畫布調整之移動、縮放、旋轉 HTML5學習總結——canvas繪制象棋(canvas繪圖) Html5 學習系列（五）Canvas繪圖API快速入門（2） html5 canvas繪圖-刻度儀表盤的繪制 HTML5之Canvas繪圖——陰影效果呈現方法 HTML5 Canvas繪圖詳解 drawImage() 方法有圖有真相！ HTML5之Canvas繪圖實例——餅狀圖相識HTML5 canvas HTML5 canvas畫圖