canvas基础—02绘制圆

阳光穿透心脏的1/2处 2022-03-20 10:26 277阅读 0赞

### 1.绘制圆 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

圆的方向(默认顺时针)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

示例

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
            
            oGC.moveTo(200,200)//初始点
            // arc(x,y,半径，起始弧度，结束弧度，旋转方向)
            // 弧度 = 角度*Math.PI/180
            oGC.arc(200,200,150,0,90*Math.PI/180)//画了一个90度的弧
            oGC.closePath()//连接初始点和圆弧的结尾点
            oGC.stroke();//画出来
        }
    
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/8ca322a281b94e9d9440da1006b81a0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/5030f6542b14423782cd17b0eb288234.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/b9f2ec62952e47fdb36ace99e21c6730.png