案例3:复杂的贝塞尔曲线 · canvas基本功能

## 案例3:复杂的贝塞尔曲线 ![](https://img.kancloud.cn/6d/c6/6dc66533f01f18425dcb0ab40f32706f_398x526.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); var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = "rgb(100, 255, 100)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI/15*11; context.moveTo(dx, dy); for (var i = 0; i <30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.bezierCurveTo(dx+x*s, dy + y*s-100, dx + x*s, dy + y*s , dx + x*s, dy + y*s); } context.closePath(); context.fill(); context.stroke(); } </script> </body> </html> ~~~