案例3：绘制复杂圆形 · canvas基本功能

# 案例3：绘制复杂圆形先看图： ![](https://img.kancloud.cn/46/90/4690be8951492160cc00e961f8ac0000_385x510.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); //step1:获取canvas元素 var context = canvas.getContext("2d"); //step2:内建的HTML5对象 context.fillStyle = "#eeeeef"; //step3-1:填充红色 context.fillRect(0, 0, 300, 400); //step3-2:绘制矩形 context.beginPath(); //step4-1:开始绘图 context.fillStyle = "rgb(100, 255, 100)"; //step4-2：设置绘图科区域颜色 context.strokeStyle = "rgb(0, 0, 100)"; //step4-3:设置线条颜色 //step4-4:绘制贝塞尔曲线 var dx = 150; var dy = 150; var s = 100; var x = Math.sin(0); //初始值为0 var y = Math.cos(0); //初始值为1 var dig = Math.PI / 15 * 11; for (var i = 0; i < 30; i++) { //不断地旋转绘制线条 x = Math.sin(i * dig); y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); //step4-5:结束绘图 context.fill(); //step4-6:填充颜色 context.stroke(); //step4-7:绘制线条 } </script> </body> </html> ~~~