<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<
html
>
<
head
>
<
meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
>
<
title
>使用bezierCurveTo绘制贝塞尔曲线
</
title
>
<
script
>
function
draw(
id){
var
canvas=
document.
getElementById(
id);
if(
canvas==
null)
{
return
false;
}
var
context=
canvas.
getContest(
"2d");
context.
fillRect(
0,
0,
300,
400);
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);
//moveTo(dx,dy);//设置原点位置,开始点
//控制点1:dx+x*s,dy+y*s-100
//控制点2:dx+x*s+100,dy+y*s
//结束点:dx+x*s,dy+y*s
context.
bezierVurveTo(
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();
}
</
script
>
</
head
>
<
body
onload=
"draw("
canvas
");"
>
<
canvas
id=
"canvas"
width=
"300"
height=
"400"
></
canvas
>
</
body
>
</
html
>