HTML5——Canvas_03之【使用bezierCurveTo绘制贝塞尔曲线】

<!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 >

猜你喜欢

转载自blog.csdn.net/Superstatus/article/details/80566088
今日推荐