I chose to do Minnie Mouse for my HTML5 project because if you haven't noticed already... I love everything Disney and I didn't think she would be just the right sort of challenge! Her bows are normally red, but I wanted to do pink to give it more of a "girly" vibe. I started out coding the head and ears because they are the farthest back in the picture. I used codes for circles for them. Then I moved onto the white part of her face, adding on all of the details (eyes, nose, mouth, etc.) afterwards. Lastly, I made the bow so that it would be on top of everything else in the picture. I had a lot of troubles with the nose at first because I wasn't sure how to make an oval and she looked really silly with just a circle for a nose, so I then used bezier curves to form an oval. Overall, I'm very happy with the way this turned out and didn't have too much trouble with the coding process!
This was the image and the graph I used for a reference. I originally was going to do Mickey Mouse, but later changed it to Minnie Mouse to make it a little more "girly".
HTML5 Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createRadialGradient(400, 300, 300, 400, 300, 400);
grd.addColorStop(0, 'pink');
grd.addColorStop(1, 'black');
context.fillStyle = grd;
context.lineWidth = 10;
context.fill();
context.stroke();
//Left Ear
context.beginPath();
context.arc(250, 125, 100, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
//Right Ear
context.beginPath();
context.arc(550, 125, 100, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
//Head
context.beginPath();
context.arc(400, 350, 175, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
//White part of head
context.beginPath();
context.moveTo(400, 225);
context.quadraticCurveTo(200, 150, 275, 375);
context.lineTo(275, 375);
context.quadraticCurveTo(150, 425, 300, 500);
context.lineTo(300, 500);
context.quadraticCurveTo(400, 550, 500, 500);
context.lineTo(500, 500);
context.quadraticCurveTo(650, 425, 525, 375);
context.lineTo(525, 375);
context.quadraticCurveTo(600, 150, 400, 225);
context.closePath();
context.fillStyle = 'rgb(255, 235, 225)';
context.lineWidth = 5;
context.fill();
context.stroke();
//Under eye
context.beginPath();
context.moveTo(350, 375);
context.quadraticCurveTo(400, 350, 450, 375);
context.lineWidth = 3;
context.lineCap = 'round';
context.stroke();
//Left eye (white)
context.beginPath();
context.moveTo(360, 370);
context.quadraticCurveTo(315, 285, 360, 280);
context.lineTo(360, 280);
context.quadraticCurveTo(400, 285, 380, 365);
context.stroke();
//Right eye (white)
context.beginPath();
context.moveTo(440, 370);
context.quadraticCurveTo(485, 285, 440, 280);
context.moveTo(440, 280);
context.quadraticCurveTo(400, 285, 420, 365);
context.stroke();
//Mouth
context.beginPath();
context.moveTo(270, 420);
context.quadraticCurveTo(400, 550, 530, 420);
context.stroke();
//Black of left eye
context.beginPath();
context.arc(370, 350, 12, 0, 2 * Math.PI, false);
context.fillStyle = 'black'
context.fill();
context.stroke();
//Black of right eye
context.beginPath();
context.arc(430, 350, 12, 0, 2 * Math.PI, false);
context.fillStyle = 'black'
context.fill();
context.stroke();
//Left dimple
context.beginPath();
context.moveTo(290, 410);
context.quadraticCurveTo(270, 410, 260, 440);
context.stroke();
//Right dimple
context.beginPath();
context.moveTo(510, 410);
context.quadraticCurveTo(530, 410, 540, 440);
context.stroke();
//Nose
context.beginPath();
context.moveTo(400, 375);
context.bezierCurveTo(350, 375, 350, 425, 400, 425);
context.bezierCurveTo(450, 425, 450, 375, 400, 375);
context.fill();
context.stroke();
//Bow
context.beginPath();
context.moveTo(360, 80);
context.quadraticCurveTo(325, 1, 250, 10);
context.quadraticCurveTo(165, 40, 270, 225);
context.quadraticCurveTo(360, 250, 375, 175);
context.quadraticCurveTo(400, 190, 425, 175);
context.quadraticCurveTo(430, 230, 530, 225);
context.quadraticCurveTo(650, 40, 550, 10);
context.quadraticCurveTo(465, 15, 430, 90);
context.quadraticCurveTo(400, 50, 360, 80);
context.closePath();
context.fillStyle = 'rgb(200, 0, 100)';
context.strokeStyle = 'black'
context.fill();
context.stroke();
//Bow details
context.beginPath();
context.moveTo(375, 175);
context.quadraticCurveTo(400, 100, 340, 70);
context.stroke();
//Bow details
context.beginPath();
context.moveTo(425, 175);
context.quadraticCurveTo(450, 120, 430, 90);
context.stroke();
//Bow details
context.beginPath();
context.moveTo(440, 123);
context.quadraticCurveTo(450, 100, 500, 125);
context.stroke();
//Middle eyelash (left eye)
context.beginPath();
context.moveTo(350, 280);
context.quadraticCurveTo(340, 265, 340, 240);
context.stroke();
//Left eyelash (left eye)
context.beginPath();
context.moveTo(340, 290);
context.quadraticCurveTo(325, 265, 330, 250);
context.stroke();
//Right eyelash (left eye)
context.beginPath();
context.moveTo(365, 280);
context.quadraticCurveTo(350, 260, 355, 245);
context.stroke();
//Middle eyelash (right eye)
context.beginPath();
context.moveTo(450, 280);
context.quadraticCurveTo(460, 265, 460, 240);
context.stroke();
//Left eyelash (right eye)
context.beginPath();
context.moveTo(460, 290);
context.quadraticCurveTo(470, 270, 470, 250);
context.stroke();
//Right eyelash (right eye);
context.beginPath();
context.moveTo(435, 280);
context.quadraticCurveTo(450, 260, 445, 245);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment