案例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> ~~~