html绘制曲线代码,用html5的canvas画布绘制贝塞尔曲线完整代码

查看效果：http://keleyi.com/keleyi/phtml/html5/7.htm

完整代码：

复制代码代码如下:

用html5的canvas画布绘制贝塞尔曲线

原文

function draw(id)

{

var canvas=document.getelementbyid(id);

if(canvas==null)

return false;

var context=canvas.getcontext('2d');

context.fillstyle="#eeeeff";

context.fillrect(0,0,400,300);

var n=0;

var dx=150;

var dy=150;

var s=100;

context.beginpath();

context.globalcompositeoperation='and';

context.fillstyle='rgb(100,255,100)';

context.strokestyle='rgb(0,0,100)';

var x=math.sin(0);

var y=math.cos(0);

var dig=math.pi/15*11;

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+100,dy+y*s,dx+x*s,dy+y*s);

}

context.closepath();

context.fill();

context.stroke();

}

draw("keleyi_com");