欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html 5画圆

程序员文章站 2022-06-23 15:43:48
如果要创建一个弧形的画布，我们可以使用 arc() 方法。 语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针) 代码： javascript code复制内容到剪贴...

如果要创建一个弧形的画布，我们可以使用 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>     
<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>   


上一篇： 厦门11月好玩的地方大全

下一篇： sql一次添加多条记录

推荐阅读