Thursday, February 28, 2013
Tuesday, February 26, 2013
Tuesday, February 19, 2013
Final Landscape
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////////////////////////sky//////////
var x = 0;
var y = 0;
var width = 800;
var height = 800;
context.beginPath();
context.rect(x,y,width,height);
// add linear gradient
var grd = context.createLinearGradient(50, 100, 350, 350);
// light blue
grd.addColorStop(0, "#336699");
// dark blue
grd.addColorStop(1, 'rgb(0, 0, 51)');
context.fillStyle = grd;
context.fill();
// add stroke
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 51)';
context.stroke()
////////////////////////////////////////////////cloud//////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.2;
var centerY = canvas.height / 3.6;
var radius = 76;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
/////////////////////////////////////////////cloud2//////////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 3.2;
var centerY = canvas.height / 3;
var radius = 78;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
/////////////////////////////////////////////////////sun/////////////
var centerX = canvas.width / 6;
var centerY = canvas.height / 7;
var radius = 80;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFFFCC");
grd.addColorStop(1, "#FFFF99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFFF99";
context.stroke();
/////////////////////////////////////////////cloud3//////////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 3.7;
var centerY = canvas.height / 3.5;
var radius = 78;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
////////////////////////////////////////////////cloud4//////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.7;
var centerY = canvas.height / 4.4;
var radius = 76;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
///////////////////////////////////////////////////hair
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2.14;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#CC9944";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "CC9944";
context.stroke();
///////////////////////////////////////////////////////////Arm1
var x = 400;
var y = 500;
var x1 = 550;
var y1 = 300;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.strokeStyle = '#FFCC99';
context.stroke();
//////////////////////////////////////////////////////////Arm2
var x = 550;
var y = 367;
var x1 = 680;
var y1 = 500;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.strokeStyle = '#FFCC99';
context.stroke();
////////////////////////////////////////////////////MOREHAIR
context.beginPath();
context.rect(474, 270, 118, 210);
context.fillStyle = '#CC9944';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC9944';
context.stroke()
///////////////////////////////////////////////////////////Dress
context.beginPath();
context.rect(474, 370, 120, 185);
context.fillStyle = '#FF007F';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#FF007F';
context.stroke()
/////////////////////////////////////////////////////////Legs
context.fillStyle = '#FF007F';
context.strokeStyle = '#FF007F';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(450, 600); // give the (x, y) coordinates
context.lineTo(610, 600);
context.lineTo(540, 450);
context.lineTo(450, 600);
//
context.fill();
context.stroke();'#FF007F';
context.closePath();
////////////////////////////////////////////////////////////NECK///////
context.beginPath();
context.rect(507, 320, 53, 57);
context.fillStyle = '#FFCC99';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'FFCC99';
context.stroke()
/////////////////////////////////////////////////////face/////////////
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 54;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFCC99");
grd.addColorStop(1, "#FFCC99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCC99";
context.stroke();
////////////////////////////////////////////////////////////EYE1
var centerX = canvas.width / 1.57;
var centerY = canvas.height / 2.1;
var radius = 9;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////////////EYE2
var centerX = canvas.width / 1.44;
var centerY = canvas.height / 2.1;
var radius = 9;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
///////////////////////////////////////////////////////////Pupil1
var centerX = canvas.width / 1.44;
var centerY = canvas.height / 2.13;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#2B9EAB");
grd.addColorStop(1, "#2B9EAB");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
//////////////////////////////////////////////////////Pupil2
var centerX = canvas.width / 1.57;
var centerY = canvas.height / 2.13;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#2B9EAB");
grd.addColorStop(1, "#2B9EAB");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////Mouth
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 1.85;
var radius = 15;
var startangle = Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "red";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
/////////////////////////////////////////////////Collar
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 1.6;
var radius = 26;
var startangle = Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "#ffcc99";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "ffcc99";
context.stroke();
////////////////////////////////////////////////Nose
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 9;
var startangle = Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "#ffcc99";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "cc9966";
context.stroke();
////////////////////////////////////////////////FlowerStem
var x = 50;
var y = 500;
var x1 = 100;
var y1 = 600;
var x2 = 200;
var y2 = 450;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(0, 102, 0)';
context.lineCap = "round";
context.stroke();
//////////////////////////////////////////////FlowerBud1
var centerX = canvas.width / 4;
var centerY = canvas.height / 1.4;
var radius = 30;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFCCDD");
grd.addColorStop(1, "#FFCCDD");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCCDD";
context.stroke();
//////////////////////////////////////////////FlowerBud2
var centerX = canvas.width / 13;
var centerY = canvas.height / 1.2;
var radius = 30;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FF9999");
grd.addColorStop(1, "#FF9999");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FF9999";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Tuesday, February 12, 2013
Not Final
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////////////////////////sky//////////
var x = 0;
var y = 0;
var width = 800;
var height = 800;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = '#002255';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#002255';
context.stroke()
////////////////////////////////////////////////cloud//////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.2;
var centerY = canvas.height / 3.6;
var radius = 76;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
/////////////////////////////////////////////cloud2//////////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 3.2;
var centerY = canvas.height / 3;
var radius = 78;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
/////////////////////////////////////////////////////sun/////////////
var centerX = canvas.width / 6;
var centerY = canvas.height / 7;
var radius = 80;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFFFCC");
grd.addColorStop(1, "#FFFF99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFFF99";
context.stroke();
/////////////////////////////////////////////cloud3//////////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 3.7;
var centerY = canvas.height / 3.5;
var radius = 78;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
////////////////////////////////////////////////cloud4//////////////
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.7;
var centerY = canvas.height / 4.4;
var radius = 76;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();
///////////////////////////////////////////////////hair
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2.14;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#CC9944";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "CC9944";
context.stroke();
////////////////////////////////////////////////////MOREHAIR
context.beginPath();
context.rect(474, 270, 118, 210);
context.fillStyle = '#CC9944';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC9944';
context.stroke()
///////////////////////////////////////////////////////////TORSO
context.beginPath();
context.rect(474, 370, 120, 185);
context.fillStyle = '#FF007F';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC2266';
context.stroke()
////////////////////////////////////////////////////////////NECK///////
context.beginPath();
context.rect(507, 320, 53, 57);
context.fillStyle = '#FFCC99';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'FFCC99';
context.stroke()
/////////////////////////////////////////////////////face/////////////
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 59;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFCC99");
grd.addColorStop(1, "#FFCC99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCC99";
context.stroke();
////////////////////////////////////////////////////////////EYE1
var centerX = canvas.width / 1.57;
var centerY = canvas.height / 2.1;
var radius = 9;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////////////EYE2
var centerX = canvas.width / 1.44;
var centerY = canvas.height / 2.1;
var radius = 9;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
///////////////////////////////////////////////////////////Pupil1
var centerX = canvas.width / 1.44;
var centerY = canvas.height / 2.13;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#2B9EAB");
grd.addColorStop(1, "#2B9EAB");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
//////////////////////////////////////////////////////Pupil2
var centerX = canvas.width / 1.57;
var centerY = canvas.height / 2.13;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#2B9EAB");
grd.addColorStop(1, "#2B9EAB");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Thursday, February 7, 2013
Work
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////////////////////////sky//////////
var x = 0;
var y = 0;
var width = 800;
var height = 800;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = '#66DDEE';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#66DDEE';
context.stroke()
/////////////////////////////////////////////////////sun/////////////
var centerX = canvas.width / 6;
var centerY = canvas.height / 7;
var radius = 80;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFFF99");
grd.addColorStop(1, "#FFFF33");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFFF33";
context.stroke();
///////////////////////////////////////////////////hair
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2.15;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#CC9944";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "CC9944";
context.stroke();
////////////////////////////////////////////////////MOREHAIR
context.beginPath();
context.rect(470, 235, 130, 200);
context.fillStyle = '#CC9944';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC9944';
context.stroke()
/////////////////////////////////////////////////////face/////////////
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 60;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFCC99");
grd.addColorStop(1, "#FFCC99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCC99";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Class work from January 31st:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("
var context = canvas.getContext("2d");
//////////////////////////////
var x = 0;
var y = 0;
var width = 800;
var height = 800;
context.beginPath();
context.rect(x,y,width,height)
context.fillStyle = '#99FFFF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#99FFFF';
context.stroke()
//////////////////////////////
//////////////////////////////
var centerX = canvas.width / 6;
var centerY = canvas.height / 7;
var radius = 80;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.
grd.addColorStop(0, "#FFFF99");
grd.addColorStop(1, "#FFFF33");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFFF33";
context.stroke();
//////////////////////////////
//////////////////////////////
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 60;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.
grd.addColorStop(0, "#FFCC99");
grd.addColorStop(1, "#FFCC99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCC99";
context.stroke();
//////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
About Me
Hi!
I am a communication major and am graduating this upcoming May. I am originally from Lithuania, but I moved with my parents to New York when I was five. I love traveling, cooking and doing yoga. This course is something I have very little experience in so I am a bit nervous, but excited to be introduced to a new field. I'm hoping for a fun final semester!
I am a communication major and am graduating this upcoming May. I am originally from Lithuania, but I moved with my parents to New York when I was five. I love traveling, cooking and doing yoga. This course is something I have very little experience in so I am a bit nervous, but excited to be introduced to a new field. I'm hoping for a fun final semester!
Subscribe to:
Posts (Atom)