JavaScriptの様々なグラフィック実装コードの例

1189 ワード

1.小さな星
次の曲線パラメータ方程式があります.
N=5
x=r*sin(nθ)*cos(θ)
y=r*sin(nθ)*sin(θ) (0≦θ≦2π)
順番にとりますθ値は0~2π(1回の増分はπ/64)で、XとYを計算し、canvas画布で座標点(X,Y)を線でつないで、一つの5つの花柄を描くことができます.
下記のHTMLコードを作成します.



   

 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);
   context.strokeStyle="blue";
   context.lineWidth=2;
   context.beginPath();
   var r=120;          //            (3)
   var n=5;           //            (3)
   for (theta=0;theta<=2*Math.PI;theta+=Math.PI/64)
   {
     b=r*Math.sin(n*theta);  //            (3)
     x=200+b*Math.cos(theta);
     y=150+b*Math.sin(theta);
     if (theta==0)
      context.moveTo(x,y);
     else
      context.lineTo(x,y);
   }
   context.stroke();
  }