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

最新推荐文章于 2024-06-02 00:26:11 发布

weixin_34137799

最新推荐文章于 2024-06-02 00:26:11 发布

阅读量471

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/picaso/archive/2012/11/27/2790710.html

版权

昨天写的博客中，写到了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>