查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: 复制代码代码如下: 用html5的canvas画布绘制贝塞尔曲线 原文 <br>function draw(id) <br>{ <br>var canvas=document.getElementById(id); <br>if(canvas==null) <br>return false; <br>var context=canvas.getContext('2d'); <br>context.fillStyle="#eeeeff"; <br>context.fillRect(0,0,400,300); <br>var n=0; <br>var dx=150; <br>var dy=150; <br>var s=100; <br>context.beginPath(); <br>context.globalCompositeOperation='and'; <br>context.fillStyle='rgb(100,255,100)'; <br>context.strokeStyle='rgb(0,0,100)'; <br>var x=Math.sin(0); <br>var y=Math.cos(0); <br>var dig=Math.PI/15*11; <br>for(var i=0;i<30;i ) <br />{ <br />var x=Math.sin(i*dig); <br />var y=Math.cos(i*dig); <br />context.bezierCurveTo(dx x*s,dy y*s-100,dx x*s 100,dy y*s,dx x*s,dy y*s); <br />} <br />context.closePath(); <br />context.fill(); <br />context.stroke(); <br />} <br />draw("keleyi_com"); <br />