Here is my final html project. This project may have put me through a couple mental breakdowns, but I have managed to come out with a piece I am happy with. Html coding is a tetidous process, and might not be the best for impatient people. I spent several hours playing with codes to finally finish with what appears to be a simple drawing. Simple is not the case though, code is a extremely difficult thing to wrap one's head around. I do not recommend anyone that is not interesting in graphic design to do this for fun. Below is the long list of coding to make this project.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇvar context = canvas.getContext('2d');
context.rect(0, 0, 800, 600);// create radial gradient
var grd = context.createRadialGradient(200, 100, 350, 138, 50, 200);
// light blue
grd.addColorStop(0, '#9909FF');
// dark blue
grd.addColorStop(1, '#ffccff');
context.fillStyle = grd;
context.fill();
///nam\
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '20pt Apple Chancery';
context.fillStyle= 'black';
context.fillText('Namaste', 355, 295);
///outline of hand///
context.beginPath();
context.moveTo(200,260);
context.bezierCurveTo(360,320,250,475,350,525);
context.quadraticCurveTo(400,560,470,525);
context.bezierCurveTo(575,475,480,300,620,260);
context.quadraticCurveTo(575, 225, 520, 250);
context.lineTo(520,110);
context.quadraticCurveTo(490,60, 450,90);
context.quadraticCurveTo(400,30, 360,90);
context.quadraticCurveTo(325,60, 290,110);
context.lineTo(290,250);
context.quadraticCurveTo(245,225,200,260);
context.lineWidth=5;
context.stroke();
///inside eye
context.beginPath();
context.moveTo(375,335);
context.quadraticCurveTo(340,360,375,410);
context.stroke();
context.beginPath();
context.moveTo(440,335);
context.quadraticCurveTo(480,360,450,405);
context.stroke();
///lines in eye
context.beginPath();
context.moveTo(410,335);
context.lineTo(410,350);
context.stroke();
context.beginPath();
context.moveTo(440,345);
context.lineTo(430,355);
context.stroke();
context.beginPath();
context.moveTo(433,371);
context.lineTo(450,371);
context.stroke();
context.beginPath();
context.moveTo(410,390);
context.lineTo(410,405 );
context.stroke();
context.beginPath();
context.moveTo(370,371);
context.lineTo(387,371);
context.stroke();
context.beginPath();
context.moveTo(440,400);
context.lineTo(430,389);
context.stroke();
context.beginPath();
context.moveTo(390,390);
context.lineTo(380,400);
context.stroke();
context.beginPath();
context.moveTo(395,355);
context.lineTo(380,344);
context.stroke();
///eyeball
context.beginPath();
context.moveTo(320,370);
context.quadraticCurveTo(400,460,505,370);
context.quadraticCurveTo(400,290,320,370);
context.lineWidth=3;
context.stroke();
//swirls
context.beginPath();
context.moveTo(320,370);
context.quadraticCurveTo(320,340,355,344);
context.quadraticCurveTo(365,315,395,330);
context.quadraticCurveTo(415,310,435,332);
context.quadraticCurveTo(465,322,475,350);
context.quadraticCurveTo(500,343,505,368);
context.lineWidth=3;
context.stroke();
//cirles in hand
context.beginPath();
context.arc(350, 500, 5, 0, 2*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(330, 450, 5, 0, 2*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(410,520,7,0,2*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(410,480,7,0,2*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(410,440,7,0,2*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(470,500,5,0,2*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(490,450,5,0,2*Math.PI, false);
context.stroke();
///eye circle
context.beginPath();
context.arc(410, 370, 15, 0, 2*Math.PI, false); context.stroke();
//
///inside line right
context.beginPath();
context.moveTo(450,90);
context.lineTo(450,250);
context.lineWidth=5
context.stroke();
/// inside line left
context.beginPath();
context.moveTo(360,90);
context.lineTo(360,250);
context.lineWidth=5;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment