如果要创建一个弧形的 画布 ，我们可以使用 arc() 方法。
语法：arc(定义一个中心点， 半 径，起始角度，结束角度，和绘图 方向 ：顺时针或逆时针)
代码：
Java Script Code复制内容到剪贴板
context.arc( center X, centerY, radius, startingAngle, endingAngle, anti clock wise);&nbs p;
HTML 5 Canvas Arc 例子：
XM L/HT ML Code复制内容到剪贴板
<!DOCTY PE HTML>
<html>
<head>
<t IT le> html5 canvas Arc</title>
<style>
body {m arg in: 0px;padding: 0px;}
# myCanvas {border: 1px solid #9C9898; mar gin :0 auto ;m argin -t op: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. stroke Style = "black"; // line color
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" h ei ght="200">
</canvas>
</body>
</html>
总结
以上是 为你收集整理的 html 5画圆 全部内容，希望文章能够帮你解决 html 5画圆 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。