绘制圆弧需要用到: ctx.arc();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canv" width="300" height="300"></canvas> <script> function draw() { var canvas = document.getElementById('canv'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); // 开启路径绘制 ctx.beginPath(); // 参数含义分别为: 圆心x, 圆心y, 半径r, 圆弧起始弧度, 圆弧结束弧度, 顺时针/逆时针(默认fasle顺时针) ctx.arc(150, 150, 50, 0, Math.PI, false); // 描边 ctx.stroke(); // ctx.closePath(); // 结束路径, 圆弧收尾相连 // ctx.fill(); // 闭合路径, 并填充闭合区域 } draw(); </script> </body> </html>
