Assignment - Using the HTML that we have learned thus far in class,
create a "South Park" type figure or a landscape/seascape image with the following attributes:
(NOTE: Post a screen shot of your portrait and your HTML on your blog. We will look at and discuss your HTML code during class.)
(REMEMBER: Do NOT copy the ten (10) dots at the end of end string of code. The dots are merely separators.)
PARAMETERS: Show understanding of the basic principles of creating shapes using HTML
- include RGB and Hexadecimal colors in your palette
- include at least one rectangle with a linear gradient
- include at least three (3) circles with a radial gradient
- include at least one triangle with a fill
- include at least two (2) arcs
SIMPLE CIRCLE CENTERED ON CANVAS:
<!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");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#FFD1FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#FFD1FF";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SIMPLE CIRCLE CENTERED ON CANVAS WITH STROKE:
<!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");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#FFD1FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SIMPLE TOP HALF CIRCLE (ARC) WITH FILL CENTERED ON CANVAS:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SIMPLE BOTTOM HALF CIRCLE (ARC) WITH FILL CENTERED ON CANVAS:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SIMPLE RIGHT HAND SIDE OF ARC CENTER ON CANVAS:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.5 * Math.PI;
var endangle = 1.5 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SMALL SLICE OF ARC WITH FILL:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.25 * Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
LARGE SLICE OF ARC WITH FILL:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startangle = 0.25 * Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
CIRCLE WITH RADIAL GRADIENT CENTERED ON CANVAS:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
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, 200);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
CIRCLE WITH RADIAL GRADIENT MOVED TO LEFT OF CENTER OF CANVAS:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2.2;
var centerY = canvas.height / 2;
var radius = 200;
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, 200);
grd.addColorStop(0, "rgb(0,0,0)");
grd.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
CIRCLE WITH RADIAL GRADIENT THAT FADES TO BACKGROUND COLOR:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
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, 200);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(255, 255, 255)";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SIMPLE RIGHT ANGLE TRIANGLE WITH FILL:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// Set the style properties.
context.fillStyle = '#FF66CC';
context.strokeStyle = '#FF66CC';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(300, 300); // give the (x, y) coordinates
context.lineTo(600, 300);
context.lineTo(300, 150);
context.lineTo(300, 300);
//
context.fill();
context.stroke();'#FF66CC';
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
"BOW TIE" WITH STROKE AND FILL:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// right side of bow ˇˇˇˇˇˇˇˇˇˇ
// Set the style properties.
context.fillStyle = '#FF66CC';
context.strokeStyle = '#00FF00';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(300, 300); // give the (x, y) coordinates
context.lineTo(450, 450);
context.lineTo(450, 150);
context.lineTo(300, 300);
//
context.fill();
context.stroke();'#00FF00';
context.closePath();
////////////////////////////////////// left side of bow ˇˇˇˇˇˇˇˇˇˇ
// Set the style properties.
context.fillStyle = '#FF66CC';
context.strokeStyle = '#00FF00';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(300, 300); // give the (x, y) coordinates
context.lineTo(150, 450);
context.lineTo(150, 150);
context.lineTo(300, 300);
//
context.fill();
context.stroke();'#00FF00';
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
SIMPLE CIRCLE WITH FILL MOVED UP FROM CENTER AND TO THE LEFT:
<!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");
/////////////////////////////////////////////////////
var centerX = canvas.width / 2.5;
var centerY = canvas.height / 3;
var radius = 200;
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, 200);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "yellow";
context.stroke();
////////////////////////////////////////////////////
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
AN ARC:
// starting point coordinates
var startX = canvas.width/2.11;
var startY = canvas.height/2.22;
// ending point coordinates
var endX = canvas.width/1.45;
var endY = canvas.height/2.;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1.8;
var cpointY = canvas.height / 2 + 75;
//// DRAW THE CURVE
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(180, 180, 180)";
context.stroke();
..........
BANGS OR EYEBROWS (you can flop these, if needed):
////////////////////////// l. h. bangs////////////////////////
var centerX = canvas.width / 3.1;
var centerY = canvas.height / 2.63;
var radius = 40;
var startangle = 0.7 * Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = 'rgb(255,239,180)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "brown";
context.stroke();
////////////////////////// r. h. bangs////////////////////////
var centerX = canvas.width / 2.35;
var centerY = canvas.height / 2.63;
var radius = 40;
var startangle = 0.3 * Math.PI;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = 'rgb(255,239,180)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "brown";
context.stroke();
..........
BEZIER CURVE WITH 1 MAGNET
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// starting point coordinates
var startX = canvas.width/2.25;
var startY = canvas.height/2.22;
// ending point coordinates
var endX = canvas.width/1.55;
var endY = canvas.height/2.;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1.9;
var cpointY = canvas.height / 2 + 95;
//// DRAW THE CURVE
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(180, 180, 180)";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
..........
BEZIER CURVE WITH 2 MAGNETS
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// starting point coordinates
var startX = 180;
var startY = 360;
// ending point coordinates
var endX = 360;
var endY = 360;
// control point coordinates ( magnet )
var cpoint1X = 380;
var cpoint1Y = 400;
// control point coordinates ( magnet )
var cpoint2X = 190;
var cpoint2Y = 480;
// DRAW THE BEZIER CURVE
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y,cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 6;
context.strokeStyle = "rgb(120, 80, 80)";
context.lineCap = "round";
context.stroke();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.........
No comments:
Post a Comment