TOTAL HOURS: 6
Honestly, I am quite impressed with myself. I was the student who couldn't figure out how to make a simple check, even though I was given the entire code for it. After experimenting with the different shapes and figuring out what worked and what didn't... this is my final canvas.
I started in the middle and worked outward. Initially, all I had was a black circle with two smaller black circles as "eyes" for the smiley face and a half circle as the smile. I knew that I wanted lots of colors and for the final piece to kind of give you a headache while also making perfect sense. Easily the most difficult part was figuring out the bézier and quadratic curves which are in aqua and magenta. Once I mastered how to do those, everything else fell right into place and it ended up being way easier than I had originally thought.
CODE:
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//SMILEY FACE
//smileyface CIRCLE
context.arc (400, 300, 150, 0, Math.PI *2, false)
context.lineWidth = 4;
context.fillStyle = 'yellow';
context.fill();
context.stroke ();
//smileyface EYES
//left eye
context.beginPath();
context.ellipse(350, 250, 15, 25, Math.PI / 1, 0, 2* Math.PI);
context.fillStyle = 'black';
context.fill();
context.stroke();
//right eye
context.beginPath();
context.ellipse(450, 250, 15, 25, Math.PI / 1, 0, 2* Math.PI);
context.fillStyle = 'black';
context.fill();
context.stroke();
//smileyface SMILE
context.beginPath ();
context.arc (400, 300, 100, 0, Math.PI *1, false)
context.lineWidth = 4;
context.stroke ();
//left line
context.beginPath ();
context.moveTo(295, 300);
context.lineTo(305, 300);
context.lineWidth = 3;
context.stroke ();
//right line
context.beginPath ();
context.moveTo(495, 300);
context.lineTo(505, 300);
context.lineWidth = 3;
context.stroke ();
//AQUA QUADRATIC CURVES
//curve1 (staring top left going clockwise)
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.quadraticCurveTo(30, 30, 315, 175);
context.strokeStyle = 'aqua'
context.lineWidth = 2;
context.stroke();
//curve 2
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(315, 175);
context.quadraticCurveTo(400, -150, 485, 175);
context.strokeStyle = 'aqua'
context.stroke();
//curve 3
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(552, 300);
context.quadraticCurveTo(770, 30, 485, 175);
context.strokeStyle = 'aqua'
context.stroke();
//curve 4
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(552, 300);
context.quadraticCurveTo(790, 550, 485, 427);
context.strokeStyle = 'aqua'
context.stroke();
//curve 5
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(315, 425);
context.quadraticCurveTo(400, 750, 485, 427);
context.strokeStyle = 'aqua'
context.stroke();
//curve 6
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.quadraticCurveTo(10, 555, 315, 427);
context.strokeStyle = 'aqua'
context.stroke();
//second round of aqua curves, starting w left curve
//curve 1
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(270, 220);
context.quadraticCurveTo(-55, 300, 270, 380);
context.strokeStyle = 'aqua'
context.stroke();
//curve 2
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(270, 220);
context.quadraticCurveTo(200, -100, 400, 150);
context.strokeStyle = 'aqua'
context.stroke();
//curve 3
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(400, 150);
context.quadraticCurveTo(600, -100, 530, 220);
context.strokeStyle = 'aqua'
context.stroke();
//curve 4
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(530, 220);
context.quadraticCurveTo(855, 300, 530, 380);
context.strokeStyle = 'aqua'
context.stroke();
//curve 5
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(530, 380);
context.quadraticCurveTo(600, 700, 400, 450);
context.strokeStyle = 'aqua'
context.stroke();
//curve 6
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(400, 450);
context.quadraticCurveTo(200, 700, 270, 380);
context.strokeStyle = 'aqua'
context.stroke();
//MAGENTA BÉZIER CURVES
//curve 1 (highest one)
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(0, 0, 800, 0, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 1;
context.stroke();
//curve 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(20, 20, 780, 20, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 2;
context.stroke();
//curve 3
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(40, 40, 760, 40, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 3;
context.stroke();
//curve 4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(60, 60, 740, 60, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 4;
context.stroke();
//curve 5
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(80, 80, 720, 80, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 5;
context.stroke();
//curve 6
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(80, 520, 720, 520, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 5;
context.stroke();
//curve 7
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(60, 540, 740, 540, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 4;
context.stroke();
//curve 8
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(40, 560, 760, 560, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 3;
context.stroke();
//curve 9
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(20, 580, 780, 580, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 2;
context.stroke();
//bottom curve 10 (lowest one)
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.beginPath();
context.moveTo(248, 300);
context.bezierCurveTo(0, 600, 800, 600, 552, 300);
context.strokeStyle = 'magenta'
context.lineWidth = 1;
context.stroke();
//YELLOW CIRCLE
context.beginPath ();
context.arc (400, 300, 290, 0, Math.PI *2, false)
context.lineWidth = 8;
context.strokeStyle = 'yellow'
context.stroke ();
// CADETBLUE CIRCLES
//first thick one
context.beginPath ();
context.arc (400, 300, 300, 0, Math.PI *2, false)
context.lineWidth = 9;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 2
context.beginPath ();
context.arc (400, 300, 310, 0, Math.PI *2, false)
context.lineWidth = 7;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 3
context.beginPath ();
context.arc (400, 300, 320, 0, Math.PI *2, false)
context.lineWidth = 6.5;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 4
context.beginPath ();
context.arc (400, 300, 330, 0, Math.PI *2, false)
context.lineWidth = 6;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 5
context.beginPath ();
context.arc (400, 300, 338, 0, Math.PI *2, false)
context.lineWidth = 5;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 6
context.beginPath ();
context.arc (400, 300, 344, 0, Math.PI *2, false)
context.lineWidth = 4;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 7
context.beginPath ();
context.arc (400, 300, 350, 0, Math.PI *2, false)
context.lineWidth = 3;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 8
context.beginPath ();
context.arc (400, 300, 355, 0, Math.PI *2, false)
context.lineWidth = 2;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 9
context.beginPath ();
context.arc (400, 300, 359, 0, Math.PI *2, false)
context.lineWidth = 1.9;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 10
context.beginPath ();
context.arc (400, 300, 362, 0, Math.PI *2, false)
context.lineWidth = 1.8;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 11
context.beginPath ();
context.arc (400, 300, 365, 0, Math.PI *2, false)
context.lineWidth = 1.7;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 12
context.beginPath ();
context.arc (400, 300, 368, 0, Math.PI *2, false)
context.lineWidth = 1.6;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//circle 11
context.beginPath ();
context.arc (400, 300, 371, 0, Math.PI *2, false)
context.lineWidth = 1.5;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 374, 0, Math.PI *2, false)
context.lineWidth = 1.4;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 377, 0, Math.PI *2, false)
context.lineWidth = 1.5;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 380, 0, Math.PI *2, false)
context.lineWidth = 1.4;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 383, 0, Math.PI *2, false)
context.lineWidth = 1.4;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 386, 0, Math.PI *2, false)
context.lineWidth = 1.3;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 389, 0, Math.PI *2, false)
context.lineWidth = 1.2;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 392, 0, Math.PI *2, false)
context.lineWidth = 1.1;
context.strokeStyle = 'CadetBlue'
context.stroke ();
context.beginPath ();
context.arc (400, 300, 368, 0, Math.PI *2, false)
context.lineWidth = 1.6;
context.strokeStyle = 'CadetBlue'
context.stroke ();
//black circle around smiley face
context.beginPath ();
context.arc (400, 300, 150, 0, Math.PI *2, false)
context.lineWidth = 4;
context.strokeStyle = 'black'
context.stroke ();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script
></head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment