html5 canvas用来绘制弧形的代码实现

互联网 18-8-6

这篇文章给大家分享的内容是关于html5 canvas用来绘制弧形的代码实现，有一定的参考价值，有需要的朋友可以从参考一下，希望对你有所帮助。

1.绘制弧形

context.arc(     centerx, centery, radius,//圆点坐标和半径     startingAngle,endingAngle,//起始弧度，结束弧度     anticlockwise = false//默认顺时针 )

startingAngle和endingAngle对应的图

eg:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=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('canvas');             canvas.width = 1024;             canvas.height = 768;             var context = canvas.getContext('2d');             // 绘制状态             context.arc(300, 300, 200, 0, 1.5 * Math.PI);             context.lineWidth = 5;             context.strokeStyle = 'blue';             context.stroke();         }     </script> </body>  </html>

运行结果：