h5画布工具

今天学的画圆，然后制作了一个大风车，其实也没有很难，请看

                先在html中创建一个canvas标签，这个标签用来创建画布，默认的大小为300*150.

<canvas id="canvas" width="800px" height="800px">您的浏览器版本不支持画布，请更新浏览器</canvas>

在这个标签里面写的文字不会在网页显示，只有当浏览器的版本不支持画布的时候，才会显示标签里的文字。

      JS代码

                

 <script type="text/javascript">
        // 获取画布
        var canvas = document.getElementById("canvas");    
        // 创建上下文对象
        var c = canvas.getContext("2d");    
        // 告诉程序绘图路径开启
        c.beginPath();    
        // 计算圆的路径
        c.arc(100, 150, 50, 0, Math.PI, true);   
        // 设置闭合路径 
        c.closePath();  
        // 描边  
        c.stroke();    
        c.fillStyle = "red"; //填充图形颜色
            
        c.fill(); //填充

            
        c.beginPath();    
        c.arc(200, 150, 50, 0, Math.PI, false);    
        c.closePath();    
        c.stroke();    
        c.fillStyle = "orange"; //填充图形颜色
            
        c.fill(); //填充

            
        c.beginPath();    
        c.arc(150, 100, 50, Math.PI * 0.5, Math.PI * 1.5, true);    
        c.closePath();    
        c.stroke();    
        c.fillStyle = "yellow"; //填充图形颜色
            
        c.fill(); //填充

            
        c.beginPath();    
        c.arc(150, 200, 50, Math.PI * 1.5, Math.PI * 0.5, true);    
        c.closePath();    
        c.stroke();    
        c.fillStyle = "green"; //填充图形颜色
            
        c.fill(); //填充

            
        c.beginPath();    
        c.arc(150, 150, 10, 0, Math.PI * 2, true);    
        c.stroke();    
        c.fillStyle = "blue"; //填充图形颜色
            
        c.fill(); //填充
    </script>

唯一比较难理解的就是半圆的起始和结束的方向，还有要计算坐标。

圆的起始角和结束角的计算方式如图：

 像哪边偏移就乘以几Π。

效果如图：