当前位置:编程学习 > html/css >>

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.zzzyk.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>   


补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,