html 5画圆

如果要创建一个弧形的画布，我们可以使用 arc() 方法。

语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)
代码：

JavaScript Code复制内容到剪贴板
context.arc(centerX, centerY, radius, startingAngle, endingAngle, anticlockwise);    
HTML5 Canvas Arc 例子：

XML/HTML Code复制内容到剪贴板
!DOCTYPE HTML>      
html>      
head>      
tITle> html5 canvas Arc/title>    
style>      
body { margin: 0px; padding: 0px; }     
#myCanvas { border: 1px solid #9C9898; margin:0 auto; margin-top:200px; margin-left:100px; }     
/style>      www.2cto.com
script>      
  window.onload = function(){     
        VAR canvas = document.getElementById("myCanvas");     
        var context = canvas.getContext("2d");     
            
        var centerX = 288;     
        var centerY = 160;     
        var radius = 75;     
        var startingAngle = 1.1 * Math.PI;     
        var endingAngle = 1.9 * Math.PI;     
        var counterclockwise = false;     
            
        context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);     
            
        context.lineWidth = 15;     
        context.strokeStyle = "black"; // line color    
        context.stroke();     
    } ;     
/script>      
/head>      
body>      
    canvas id="myCanvas" width="578" height="200">      
    /canvas>      
/body>      
/html>    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！