STAR PROJECT: HOW TO DRAW A STAR
|
Fixed Coodinates
|
|
FIXED COORDINATES
<![CDATA[
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(180,40);
ctx.lineTo(300,320);
ctx.lineTo(30,150);
ctx.lineTo(330,150);
ctx.lineTo(60,320);
ctx.lineTo(180,40);
ctx.closePath();
ctx.stroke();
]]>
|
|
DRAW ANYWHERE
|
|
DRAW ANYWHERE
<![CDATA[
function drawStar(x,y){
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(x,y);
ctx.lineTo(x+12,y+28);
ctx.lineTo(x-15,y+11);
ctx.lineTo(x+15,y+11);
ctx.lineTo(x-12,y+28);
ctx.lineTo(x,y);
ctx.closePath();
ctx.stroke();
}
INDIVIDUAL FUNCTION CALL:
drawStar(200,330);
]]>
|
|
SCALABLE STAR
|
|
SCALABLE STAR
<![CDATA[
function drawStar(x,y,s){
ctx.beginPath();
ctx.lineWidth=3;
ctx.moveTo(x,y);
ctx.lineTo(x+4*s,y+9*s);
ctx.lineTo(x-5*s,y+4*s);
ctx.lineTo(x+5*s,y+4*s);
ctx.lineTo(x-4*s,y+9*s);
ctx.lineTo(x,y);
ctx.closePath();
ctx.stroke();
}
INDIVIDUAL FUNCTION CALL:
drawStar(200,60,5);
]]>
|
|
RESIZABLE STAR
|
|
RESIZABLE STAR
<![CDATA[
function drawStar(h,k,r){
ctx.beginPath();
ctx.lineWidth=3;
ctx.beginPath();
for(var theta = 0; theta < 5; theta++){
var x = h + r*Math.cos((theta*144+18)*Math.PI/180);
var y = k - r*Math.sin((theta*144+18)*Math.PI/180);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
}
INDIVIDUAL FUNCTION CALL:
drawStar(100,140,100);
]]>
|
|
SEVEN POINT STAR
|
|
SEVEN POINT STAR
<![CDATA[
var nextpt = (360/7)*3;
function drawStar(h,k,r){
ctx.beginPath();
ctx.lineWidth=3;
ctx.beginPath();
for(var theta = 0; theta < 7; theta++){
var x = h + r*Math.cos(theta*nextpt*Math.PI/180);
var y = k - r*Math.sin(theta*nextpt*Math.PI/180);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
}
]]>
|
|
NINE POINT STAR
|
|
NINE POINT STAR
<![CDATA[
var nextpt = (360/9)*4
function drawStar(h,k,r){
ctx.beginPath();
ctx.lineWidth=3;
ctx.beginPath();
for(var theta = 0; theta < 9; theta++){
var x = h + r*Math.cos(theta*nextpt*Math.PI/180);
var y = k - r*Math.sin(theta*nextpt*Math.PI/180);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
}
]]>
|
|
CIRCLE OF STARS
|
|
CIRCLE OF STARS
<![CDATA[
function drawStar(h,k,r){
ctx.beginPath();
ctx.lineWidth=3;
ctx.beginPath();
for(var theta = 0; theta < 5; theta++){
var x = h + r*Math.cos((theta*144+18)*Math.PI/180);
var y = k - r*Math.sin((theta*144+18)*Math.PI/180);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
}
function drawCirc(h,k,r){
for(var angle = 0; angle < 360; angle+=30){
var a = h + r*Math.cos(angle*Math.PI/180);
var b = k - r*Math.sin(angle*Math.PI/180);
drawStar(a,b,20);
}
}
]]>
|
|
ROTATING STAR
|
|
ROTATING STAR
<![CDATA[
function xcor(offset){
var radi = 178;
if(offset%2==0){
radi=68;
}
return w/2 + Math.cos((ang+offset*36)*Math.PI/180)*radi;
}
function ycor(offset){
var radi = 178;
if(offset%2==0){
radi=68;
}
return w/2 + Math.sin((ang+offset*36)*Math.PI/180)*radi;
}
function drawStar() {
ctx.beginPath();
ctx.moveTo(xcor(0),ycor(0));
for(var i=1; i<10; i++){
x=xcor(i);
y=ycor(i);
ctx.lineTo(x,y);
}
ctx.closePath();
ctx.stroke();
ang+=2;
}
]]>
|
|