Canvas Project
var bkgdgrd = context.createLinearGradient(0,0,0,mouseY); // AXIS
bkgdgrd.addColorStop(0,"white" );
bkgdgrd.addColorStop(0.14 , "yellow" );
bkgdgrd.addColorStop(0.28 , "orange" );
bkgdgrd.addColorStop(0.42 , "blue" );
bkgdgrd.addColorStop(0.56 , "#02269F" );
bkgdgrd.addColorStop(0.70 , "#000B8A" );
bkgdgrd.addColorStop(0.84 , "#000042" );
//
/// BACKGROUND
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();
//
context.beginPath();
context.arc(350,330,200,0.3*Math.PI,0.9*Math.PI,true);
context.closePath();
context.fillStyle = "rgba(42,255,33,1.00)";
context.fill();
context.strokeStyle = "rgba(42,255,33,1)";
context.stroke();
//antenna left
context.beginPath();
context.moveTo(200,70);
context.lineTo(300,450);
context.closePath();
context.lineWidth = 30;
context.stroke();
//antenna right
context.beginPath();
context.moveTo(500,70);
context.lineTo(350,450);
context.closePath();
context.lineWidth = 30;
context.stroke();
//antenna top left
context.beginPath();
context.arc(200,70,40,0*Math.PI,2*Math.PI,true);
context.closePath();
context.fillStyle = "rgba(42,255,33,1)";
context.fill();
context.stroke();
//antenna right
context.beginPath();
context.arc(500,70,40,0*Math.PI,2*Math.PI,true);
context.closePath();
context.fillStyle = "rgba(42,255,33,1)";
context.fill();
context.stroke();
//
var quad = context.createLinearGradient(200,200,400,500);
quad.addColorStop(0, "rgba(70,137,70,1.00)");
quad.addColorStop(.2, "rgba(0,210,83,1.00)");
context.beginPath();
context.arc(200, 70, 30, 0, 6.283185307179586, false);
context.closePath();
context.restore();
context.fillStyle = quad;
context.fill();
//
var quad = context.createLinearGradient(200,200,400,500);
quad.addColorStop(0, "rgba(130,255,130,1.00)");
quad.addColorStop(.5, "rgba(0,52,21,1.00)");
context.beginPath();
context.arc(500, 70, 30, 0, 6.283185307179586, false);
context.closePath();
context.restore();
context.fillStyle = quad;
context.fill();
//
var quad = context.createLinearGradient(200,200,400,500);
quad.addColorStop(0, "rgba(81,138,255,1.00)");
quad.addColorStop(1, "rgba(0,52,21,1.00)");
context.beginPath();
context.arc(350, 200, 40, 0, 6.283185307179586, false);
context.closePath();
context.restore();
context.fillStyle = quad;
context.fill();
//
var quad = context.createLinearGradient(200,200,400,500);
quad.addColorStop(0, "rgba(0,23,70,1.00)");
quad.addColorStop(1, "rgba(0,0,0,1.00)");
context.beginPath();
context.arc(350, 200, 10, 0, 6.283185307179586, false);
context.closePath();
context.restore();
context.fillStyle = quad;
context.fill();
//UFOS
//top
context.beginPath();
context.arc(96,110,20,0.3*Math.PI,0.9*Math.PI,true);
context.closePath();
context.fillStyle = "rgba(0,0,0,1.00)";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#404040";
context.stroke();
//bottom
context.beginPath();
context.arc(110,50,80,0.4*Math.PI,0.80*Math.PI,false);
context.closePath();
context.fillStyle = "rgba(0,0,0,1.00)";
context.fill();
context.stroke();
//
//top
context.beginPath();
context.arc(637,100,20,0.3*Math.PI,0.9*Math.PI,true);
context.closePath();
context.fillStyle = "rgba(0,0,0,1.00)";
context.fill();
context.stroke();
//bottom
context.beginPath();
context.arc(650,45,80,0.4*Math.PI,0.80*Math.PI,false);
context.closePath();
context.fillStyle = "rgba(0,0,0,1.00)";
context.fill();
context.stroke();
//
// sky scrapers
context.beginPath();
context.rect(0, 150, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(175, 230, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(350, 270, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(525, 180, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(700, 230, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
// front skyline
context.beginPath();
context.rect(0, 330, 240, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(240, 370, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(415, 400, 175, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
//
context.beginPath();
context.rect(590, 300, 220, 600);
context.fillStyle = "black";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "gray";
context.stroke();
var windowyellow = context.createRadialGradient(mouseX, mouseY,50, mouseX, mouseY, 300);
windowyellow.addColorStop(0, "rgba(255,255,0,1)");
windowyellow.addColorStop(0.5, "rgba(255,0,0,1)");
windowyellow.addColorStop(1, "rgba(255,130,0,1.00)");
// windows
context.beginPath();
context.rect(50, 400, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(150, 400, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(100, 460, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(200, 460, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(20, 460, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(260, 420, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(350, 420, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(310, 500, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(450, 440, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(530, 440, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(490, 500, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(630, 350, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(690, 350, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(755, 350, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(630, 400, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(690, 400, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(755, 400, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(630, 450, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(690, 450, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(755, 450, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(30, 200, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(70, 200, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(110, 200, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(30, 250, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(70, 250, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(110, 250, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(210, 270, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(260,270, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(310, 270, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
// context.beginPath();
context.rect(210, 310, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(260, 310, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(310, 310, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(380, 300, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(430, 300, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(480, 300, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(380, 340, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(430, 340, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(480, 340, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(560, 230, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(605, 230, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(650, 230, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(560, 275, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(605, 275, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(650, 275, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(720, 245, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(770, 245, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//
context.beginPath();
context.rect(745, 270, 15, 15);
context.fillStyle = windowyellow;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "yellow";
context.stroke();
//finger 1
context.beginPath();
context.moveTo(200,232); // X,Y Coordinates of point a
context.lineTo(250,232); // X1, Y1 coordinates of boint b
context.lineTo(200,300); //X2, Y2 coordinates of point c
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "rgba(8,220,0,1.00)"
context.fillStyle = "rgba(8,220,0,1.00)"
context.fill();
context.stroke();
// finger 2
context.beginPath();
context.moveTo(275,232); // X,Y Coordinates of point a
context.lineTo(330,232); // X1, Y1 coordinates of boint b
context.lineTo (300,300); //X2, Y2 coordinates of point c
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "rgba(8,220,0,1.00)"
context.fillStyle = "rgba(8,220,0,1.00)"
context.fill();
context.stroke();
//finger 3
context.beginPath();
context.moveTo(365,272); // X,Y Coordinates of point a
context.lineTo(410,272); // X1, Y1 coordinates of boint b
context.lineTo (400,330); //X2, Y2 coordinates of point c
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "rgba(8,220,0,1.00)"
context.fillStyle = "rgba(8,220,0,1.00)"
context.fill();
context.stroke();
//finger 4
context.beginPath();
context.moveTo(430,272); // X,Y Coordinates of point a
context.lineTo(470,272); // X1, Y1 coordinates of boint b
context.lineTo (450,330); //X2, Y2 coordinates of point c
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "rgba(8,220,0,1.00)"
context.fillStyle = "rgba(8,220,0,1.00)"
context.fill();
context.stroke();
Comments
Post a Comment