1.绘制弧形
context.arc(
center x, centery, radius,// 圆 点坐标和 半 径
startingAngle,endingAngle,//起始弧度，结束弧度
anti clock wise = false//默认顺时针
)startingAngle和endingAngle对应的图
eg:
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie= Edge ">
<title>canvas画弧形</title>
</head>
<body>
<canvas id="canvas">浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">
window.onload = function() {
VAR canvas = document.getElementById(& # 39;canvas');
canvas.width = 1024;
canvas.h ei ght = 768;
var context = canvas.getContext('2d');
// 绘制状态
context.arc(300, 300, 200, 0, 1.5 * Math.PI);
context.lineWidth = 5;
context. stroke Style = 'blue';
context.stroke();
}
</script>
</body>
</html>运行结果：
2.be gin Path()和closePath() 不用 成对出现。
beginPath()代表重新规划一个路径；
closePath()代表要结束当前的路径，如果当前路径没封闭，会自动封闭当前路径，如果 不想 要封闭，则使用beginPath()就好了，不用使用closePath()。
closePath()对fill()不起作用。因为fill()也会自动封闭当前路径，然后填充。
相关文章推荐：
html5 video如何实现实时监测当前播放时间（代码）
H5中 画布 、拖放事件以及 音视频 的代码实例
以上就是html5 canvas用来绘制弧形的代码实现的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 html5 canvas用来绘制弧形的代码实现 全部内容，希望文章能够帮你解决 html5 canvas用来绘制弧形的代码实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 canvas用来绘制弧形的代码实现的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204324