案例1 · canvas基本功能

## 案例：使用 `arc` 绘制 `canvas` 图形 ![](https://img.kancloud.cn/c0/1f/c01f4ffbb7998f87b7327243cbe069ad_203x144.png) 代码如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext("2d"); ctx.beginPath(); //step1:开始一条路径，或重置当前的路径 ctx.arc(95, 50, 40, 0, 1.5 * Math.PI); //step2:绘制圆 ctx.stroke(); //step3:绘制 </script> </body> </html> ~~~