案例2 · canvas基本功能

## 使用 `arc` 函数绘制复杂的 `canvas` 图形 ![](https://img.kancloud.cn/70/44/70448ca127a42f364317319745d625f9_388x518.png) 相关代码如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> function draw(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fillRect(0, 0, 600, 700); for (i = 0; i <= 10; i++) { context.beginPath(); //开始 context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); //画圆 context.closePath(); //结束 context.fillStyle = "rgba(255, 0, 0, 0.25)"; //颜色 context.fill(); //绘制并填充颜色 } } </script> </body> </html> ~~~