I had a very hard time with this project, as I chose to create a character not realizing the depth and length of time required it would take to create it. My attempt consists of about 15 different shapes and was very tedious to figure out where each shape needed to be. Again, I found that creating a character made the process all the more harder due to the fact that everything had to be, for the most part, precisely placed and this is something I found very difficult and time consuming. I ended up not being able to finish the entire character, because it got to a point of frustration and desperation that I needed to stop, but I thought that for what I was able to complete I had done a good job.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 190;
context.beginPath();
context.arc(centerX, centerY, radius, 2, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 4;
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.4;
var centerY = canvas.height / 5.8;
var radius = 120;
context.beginPath();
context.arc(centerX, centerY, radius, 2, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 4;
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.7;
var centerY = canvas.height / 5.8;
var radius = 120;
context.beginPath();
context.arc(centerX, centerY, radius, 2, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 4;
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2.34;
var y = canvas.height / 2.8;
var radius = 59;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
// line color
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.8;
var y = canvas.height / 2.8;
var radius = 60;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.fillStyle = 'tan';
context.fill();
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
// line color
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2.8;
var y = canvas.height / 1.65;
var radius = 75;
var startAngle = .4 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.fillStyle = 'tan';
context.fill();
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;
// line color
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.54;
var y = canvas.height / 1.65;
var radius = 75;
var startAngle = .5 * Math.PI;
var endAngle = 1 * Math.PI;
var counterClockwise = true;
context.fillStyle = 'tan';
context.fill();
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;
// line color
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 1.6721;
var y = canvas.height / 2.4;
var radius = 200;
var startAngle = .9 * Math.PI;
var endAngle = 1.1 * Math.PI;
var counterClockwise = false;
context.fillStyle = 'tan';
context.fill();
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
// line color
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(400, 400, 160, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'tan';
context.fill();
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2.2;
var y = canvas.height / 2.4;
var radius = 150;
var startAngle = .5 * Math.PI;
var endAngle = 3.8 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
// line color
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 110;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.2;
var centerY = canvas.height / 2.4;
var radius = 85;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 2.4;
var radius = 90;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.8;
var centerY = canvas.height / 2.9;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'tan';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 10;
var centerY = 0;
var radius = 40;
// save state
context.save();
// translate context
context.translate(canvas.width / 2.1, canvas.height / 1.7);
// scale context horizontally
context.scale(1.8, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 1.55;
var radius = 100;
var startAngle = 1.2 * Math.PI;
var endAngle = 1.8 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 2.4;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.8;
var centerY = canvas.height / 2.4;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(400, 475, 90, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.strokeStyle();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="700"></canvas>
</body>
</html>
No comments:
Post a Comment