如果要创建一个弧形的画布，我们可以使用 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>
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论