Tuesday, September 10, 2013

Assignment 02 Progress 3

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

// background
    // sky      
        context.beginPath();
        context.rect(0,0,800,400);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 0, 400, 400);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    // grass
        context.beginPath();
        context.rect(0,400,800,200);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 600);
        // dark green
        grd.addColorStop(0, "RGB(0, 102, 51)");
        // light green
        grd.addColorStop(1, "RGB(0, 173, 56)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    // sun
        context.beginPath();
        context.arc(0, 0, 100, 0, 2 * Math.PI, false);
        // add Radial Gradient
        var grd = context.createRadialGradient(0, 0, 30, 0, 0, 100);
        grd.addColorStop(0, "#EF6439");
        grd.addColorStop(0.33, "#F6911D");
        grd.addColorStop(0.67, "#EFC539");
        grd.addColorStop(1, "#FCDB71");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
// house
    // first square
        context.beginPath();
        context.rect(450,350,100,100);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
   // first roof
        context.beginPath();
        context.moveTo(450, 350);
          context.lineTo(625, 200);
        context.lineTo(625, 350);
        context.lineTo(450, 350);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // third roof
        context.beginPath();
        context.moveTo(800, 350);
          context.lineTo(625, 200);
        context.lineTo(625, 350);
        context.lineTo(800, 350);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // third square
         context.beginPath();
        context.rect(700,350,100,100);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
    // chimney
        context.beginPath();
        context.rect(660,200,40,100);
        context.fillStyle = '#521616';
        context.fill();
        context.stroke();
    // second square
        context.beginPath();
        context.rect(550,300,150,150);
        context.fillStyle = '#E4D4B6';
        context.fill();
        context.stroke();
    // second roof
        context.beginPath();
        context.moveTo(550, 300);
          context.lineTo(625, 180);
        context.lineTo(700, 300);
        context.lineTo(550, 300);
        context.fillStyle = '#404040';
        context.fill();
        context.stroke();
    // door
        context.beginPath();
        context.rect(590,400,70,50);
        context.fillStyle = '#F0ECDF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(625,400);
        context.lineTo(625,450);
        context.fill();
        context.stroke();
    // window left
        context.beginPath();
        context.arc(750, 400, 25, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(750,375);
        context.lineTo(750,425);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(725,400);
        context.lineTo(775,400);
        context.fill();
        context.stroke();
    // window right
        context.beginPath();
        context.arc(500, 400, 25, 0, 2 * Math.PI, false);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(500,375);
        context.lineTo(500,425);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(475,400);
        context.lineTo(525,400);
        context.fill();
        context.stroke();
    // window center L
        context.beginPath();
        context.rect(567,325,50,50);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(592,325);
        context.lineTo(592,375);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(567,350);
        context.lineTo(617,350);
        context.fill();
        context.stroke();
    // window center R
        context.beginPath();
        context.rect(633,325,50,50);
        context.fillStyle = '#FFFFFF';
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(658,325);
        context.lineTo(658,375);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(633,350);
        context.lineTo(683,350);
        context.fill();
        context.stroke();
    // door handles
        context.beginPath();
        context.moveTo(620,420);
        context.lineTo(620,430);
        context.fill();
        context.stroke();
        context.beginPath();
        context.moveTo(630,420);
        context.lineTo(630,430);
        context.fill();
        context.stroke();
// pool
    // base
        context.beginPath();
        context.rect(368,400,82,38);
        context.fillStyle = '#FAFACA';
        context.fill();
        context.stroke();
    // water
        context.beginPath();
        context.rect(375,400,75,30);
        // add Linear Gradient
        var grd = context.createLinearGradient(400, 400, 400, 430);
        // dark blue
        grd.addColorStop(0, "RGB(8, 103, 246)");
        // light blue
        grd.addColorStop(1, "RGB(106, 216, 250)");
        context.fillStyle = grd;
        context.fill();
        context.stroke();
// me
    // hair
        context.beginPath();
        context.moveTo(300, 400);
          context.lineTo(274, 330);
        context.lineTo(240, 400);
        context.lineTo(300, 400);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.moveTo(200, 400);
          context.lineTo(222, 330);
        context.lineTo(253, 400);
        context.lineTo(200, 400);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
        context.beginPath();
        context.rect(200,399,100,70);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = '#000000';
        context.stroke();
    // neck
        context.beginPath();
        context.rect(245,370,10,30);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.strokeStyle = "#D5CBAD";
        context.stroke();
    // head
        context.beginPath();
        context.arc(249, 350, 30, 0, 2 * Math.PI, false);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.strokeStyle = "#D5CBAD";
        context.stroke();
    // arms
        context.beginPath();
        context.moveTo(205, 420);
          context.lineTo(205, 470);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'round';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
        context.beginPath();
        context.moveTo(295, 420);
          context.lineTo(295, 470);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'round';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
    // legs
        context.beginPath();
        context.moveTo(233, 500);
          context.lineTo(233, 570);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'square';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
        context.beginPath();
        context.moveTo(270, 500);
          context.lineTo(270, 570);
        context.fillStyle = '#D5CBAD';
        context.fill();
        context.lineWidth = 15;
        context.lineCap = 'square';
        context.strokeStyle = '#D5CBAD';
        context.stroke();
        context.closePath();
    // left shoe
        context.beginPath();
        context.beginPath();
        context.rect(225, 570, 16, 16);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(225, 570);
          context.lineTo(200, 595);
        context.lineTo(225, 587);
        context.lineTo(225, 570);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(236, 577);
          context.lineTo(236, 588);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 10;
        context.strokeStyle = '#7E7C80';
        context.stroke();
    // right shoe
        context.beginPath();
        context.beginPath();
        context.rect(262, 570, 16, 16);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(278, 570);
          context.lineTo(303, 595);
        context.lineTo(278, 587);
        context.lineTo(278, 570);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.strokeStyle = '#7E7C80';
        context.stroke();
        context.beginPath();
        context.moveTo(266, 577);
          context.lineTo(266, 588);
        context.fillStyle = '#7E7C80';
        context.fill();
        context.lineWidth = 10;
        context.strokeStyle = '#7E7C80';
        context.stroke();
    // dress
        context.beginPath();
        context.arc(280, 430, 31, 2 * Math.PI, 1 * Math.PI, true);
        context.fillStyle = "#750BEF";
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = "#750BEF";
        context.stroke();
        context.beginPath();
        context.arc(220, 430, 31, 2 * Math.PI, 1 * Math.PI, true);
        context.fillStyle = "#750BEF";
        context.fill();
        context.strokeStyle = "#750BEF";
        context.stroke();
        context.beginPath();
        context.moveTo(180, 510);
          context.lineTo(250, 440);
        context.lineTo(320, 510);
        context.lineTo(180, 510);
        context.fillStyle = '#750BEF';
        context.fill();
        context.strokeStyle = '#750BEF';
        context.stroke();
        context.beginPath();
        context.rect(220,399,60,70);
        context.fillStyle = '#750BEF';
        context.fill();
        context.strokeStyle = '#750BEF';
        context.stroke();
    // hair bangs
        context.beginPath();
        context.arc(252, 359, 40, 1.5 * Math.PI, 1.2 * Math.PI, true);
        context.fillStyle = "#000000";
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
        context.beginPath();
        context.arc(243, 363, 44, 1.8 * Math.PI, 1.5 * Math.PI, true);
        context.fillStyle = "#000000";
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
    // left eye
        context.beginPath();
        context.arc(237, 338, 10, .8 * Math.PI, .2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(237, 350, 10, 1.8 * Math.PI, 1.2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(240, 344, 2, 0, 2 * Math.PI, false);
        context.fillStyle = '#000000';
        context.fill();
        context.strokeStyle = "#000000";
        context.stroke();
    // right eye
        context.beginPath();
        context.arc(260, 338, 10, .8 * Math.PI, .2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.beginPath();
        context.arc(260, 350, 10, 1.8 * Math.PI, 1.2 * Math.PI, true);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "#FFFFFF";
        context.stroke();
   
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)