My Version
The Original
I actually really enjoyed HTML. When we were going over it in class I thought it was going to be a lot harder then what it was. It took me some time but I believe I did I great job. This is my best work I have completed this far in this class.
My Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//rightfoot
//lefttoe
context.beginPath();
context.moveTo(410,500)
context.bezierCurveTo(410,500,447,590,429,494);
context.strokeStyle= 'rgb(250, 132,0)';
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.stroke();
//middletoe
context.beginPath();
context.moveTo(423,500)
context.bezierCurveTo(423,500,478,580,440,470);
context.strokeStyle= 'rgb(250, 132,0)';
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.stroke();
//righttoe
context.beginPath();
context.moveTo(444,500)
context.bezierCurveTo(444 ,500,530,555,415,445);
context.strokeStyle= 'rgb(250, 132,0)';
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.stroke();
//leftfoot
//righttoe
context.beginPath();
context.moveTo(347,500)
context.bezierCurveTo(347,500,310,590,325,494);
context.strokeStyle= 'rgb(250, 132,0)';
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.stroke();
//middletoe
context.beginPath();
context.moveTo(328,500)
context.bezierCurveTo(328,500,274,580,315,470);
context.strokeStyle= 'rgb(250, 132,0)';
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.stroke();
//lefttoe
context.beginPath();
context.moveTo(305,500)
context.bezierCurveTo(305,500,235,555,326,448);
context.strokeStyle= 'rgb(250, 132,0)';
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.stroke();
//leftarm
context.beginPath();
context.moveTo(177,350)
context.bezierCurveTo(177,350,286,188,365,282);
context.bezierCurveTo(365,282,280,340,250,346);
context.bezierCurveTo(250,346,130,430,177,350);
context.fillStyle='rgb(0,0,0)';
context.strokeStyle='rgb(0,0,0)';
context.fill();
context.stroke();
//rightarm
context.beginPath();
context.moveTo(570,350)
context.bezierCurveTo(570,350,467,188,375,282);
context.bezierCurveTo(365,282,467,340,500,346);
context.bezierCurveTo(500,346,620,430,570,350);
context.fillStyle='rgb(0,0,0)';
context.fill();
context.stroke();
//black ON BODY
context.beginPath();
context.arc(371.6, 373, 133,0, 2 * Math.PI, false);
context.fillStyle='rgb(0,0,0)';
context.strokeStyle= 'rgb(0,0,0)';
context.fill();
//WHITE ON BODY
context.beginPath();
context.arc(371.6, 379, 116,0, 2 * Math.PI, false);
context.fillStyle='rgb(255,255,255)';
context.strokeStyle= 'rgb(255,255,255)';
context.fill();
context.closePath();
context.stroke();
//head
context.beginPath();
context.arc(365, 170, 111,0, 2 * Math.PI, false);
context.lineWidth=5.5
context.strokeStyle= 'rgb(0,0,0)';
context.fillStyle= 'rgb(255,255,255)';
context.fill();
context.lineWidth=6.8
context.closePath();
context.stroke();
//topofhead
context.beginPath();
context.moveTo(370,155)
context.bezierCurveTo(400, 100,450,120,474.7,155);
context.bezierCurveTo(474.7,155,488,100,405,62);
context.bezierCurveTo(405,62,288,30,258,150);
context.bezierCurveTo(290,125,340,100,370,155);
context.closePath();
context.strokeStyle= 'rgb(0,0,0)';
context.fillStyle= 'rgb(0,0,0)';
context.fill();
context.stroke();
//righteye
context.beginPath();
context.arc(312,175,16,0, 2 * Math.PI, false);
context.fill();
context.stroke();
//righteyewhite
context.beginPath();
context.arc(317,171,10,0, 2 * Math.PI, false);
context.fillStyle= 'rgb(255,255,255)';
context.fill();
context.stroke();
//lefteye
context.beginPath();
context.arc(425,173,15,0, 2 * Math.PI, false);
context.fillStyle= 'rgb(0,0,0)';
context.fill();
context.stroke();
//lefteyewhite
context.beginPath();
context.arc(428,167,10,0, 2 * Math.PI, false);
context.fillStyle= 'rgb(255,255,255)';
context.fill();
context.stroke();
//nose
context.beginPath();
context.moveTo(353,200)
context.lineTo(388,200)
context.lineTo(369,222)
context.lineTo(353,200)
context.strokeStyle= 'rgb(250, 132,0)';
context.fill();
context.closePath();
context.fillStyle= 'rgb(250,132,0)';
context.fill();
context.lineWidth=2
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment