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コードを作成します.
次の曲線パラメータ方程式があります.
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();
}