<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
//Head
var centerX = 400;
var centerY = 250;
var radius = 125;
var centerX3 = 400;
var centerY3 = 275;
var radius3 = 100;
//Face
var x2 = 400;
var y2 = 225;
var controlX = 280;
var controlY = 150;
var endX = 305;
var endY = 310;
var controlX1 = 525;
var controlY1 = 140;
var endX1 = 495;
var endY1 = 310;
//Ears
var centerX1 = 250;
var centerY1 = 125;
var radius1 = 70;
var centerX2 = 550;
var centerY2 = 125;
var radius2 = 70;
//Nose
var centerX4 = 400;
var centerY4 = 320;
var radius4 = 20;
//Eye1
var centerX5 = 350;
var centerY5 = 250;
var radius5 = 25;
var centerX7 = 350;
var centerY7 = 260;
var radius7 = 15;
//Eye2
var centerX6 = 450;
var centerY6 = 250;
var radius6 = 25;
var centerX8 = 450;
var centerY8 = 260;
var radius8 = 15;
//Smile
var centerX9 = 400;
var centerY9 = 320;
var radius9 = 50;
//Chest
var X3 = 350;
var Y3 = 375;
var width3 = 100;
var height3 = 75;
//Arm1
var x4 = 350;
var y4 = 375;
var x5 = 250;
var y5 = 300;
//Arm2
var x6 = 450;
var y6 = 375;
var x7 = 500;
var y7 = 450;
//Pants
var x8 = 350;
var y8 = 450;
var x9 = 325;
var y9 = 525;
var x10 = 375;
var y10 = 525;
var x11 = 390;
var y11 = 490;
var x12 = 410;
var y12 = 525;
var x13 = 475;
var y13 = 525;
var x14 = 450;
var y14 = 450;
var x15 = 350;
var y15 = 450;
//Buttons
var centerX12 = 375;
var centerY12 = 475;
var radius12 = 10;
var centerX13 = 420;
var centerY13 = 475;
var radius13 = 10;
//Leg1
var x16 = 350;
var y16 = 525;
var x17 = 350;
var y17 = 555;
//Leg2
var x18 = 445;
var y18 = 525;
var x19 = 445;
var y19 = 555;
//Shoe
var centerX10 = 340;
var centerY10 = 570;
var radius10 = 20;
var centerX11 = 455;
var centerY11 = 570;
var radius11 = 20;
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
//context.fillStyle = 'rgb(0, 100, 255)';
//context.fill();
context.stroke();
//Head
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
context.lineWidth = 3;
//context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.beginPath();
context.arc(centerX3, centerY3, radius3, 0, Math.PI, false);
//context.fill();
context.stroke();
//Nose
context.beginPath();
context.arc(centerX4, centerY4, radius4, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(25, 25, 25)';
context.fill();
context.stroke();
//Face
context.beginPath();
context.moveTo(x2, y2);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.moveTo(x2, y2);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.lineWidth = 3;
context.stroke();
//Ears
context.beginPath();
context.arc(centerX1, centerY1, radius1, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//Eye
context.beginPath();
context.arc(centerX5, centerY5, radius5, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.beginPath();
context.arc(centerX7, centerY7, radius7, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//Eye2
context.beginPath();
context.arc(centerX6, centerY6, radius6, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.beginPath();
context.arc(centerX8, centerY8, radius8, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//Smile
context.beginPath();
context.arc(centerX9, centerY9, radius9, 0, Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 50, 0)';
context.stroke();
//Chest
context.beginPath();
context.rect(X3, Y3, width3, height3);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//Arm1
context.beginPath();
context.moveTo(x4, y4);
context.lineTo(x5, y5);
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//Arm2
context.beginPath();
context.moveTo(x6, y6);
context.lineTo(x7, y7);
context.stroke();
//Pants
context.beginPath();
context.moveTo(x8, y8);
context.lineTo(x9, y9);
context.lineTo(x10, y10);
context.lineTo(x11, y11);
context.lineTo(x12, y12);
context.lineTo(x13, y13);
context.lineTo(x14, y14);
context.lineTo(x15, y15);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();
//Buttons
context.beginPath();
context.arc(centerX12, centerY12, radius12, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.beginPath();
context.arc(centerX13, centerY13, radius13, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
//Leg1
context.beginPath();
context.moveTo(x16, y16);
context.lineTo(x17, y17);
context.stroke();
//Leg2
context.beginPath();
context.moveTo(x18, y18);
context.lineTo(x19, y19);
context.stroke();
//Shoes
context.beginPath()
context.arc(centerX10, centerY10, radius10, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();
context.beginPath();
context.arc(centerX11, centerY11, radius11, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment