Digital Arts: ASCII Project

For my project I chose to do make an iPhone. The idea came to me when I was thinking of what I should make and my phone rang, I then came up with the general look for Apple's iPhone. Code is below.

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

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

var rectWidth = 200;
var rectHeight = 100;
var rectX = 200;
var rectY = 50;
var cornerRadius = 40;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.55;
var centerY = canvas.height / 2.09;
var radius = 25;
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);

context.beginPath();
context.rect(0, 0, 550, 550);
context.fillStyle = 'rgb(100, 200, 200)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(400, 37 / 2);
context.lineTo(400 - 250, 37 / 2);
context.lineWidth = 20;
context.strokeStyle = 'rgb(75, 75, 75)';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(145, 1000 / 2);
context.lineTo(397 - 252, 39 / 2);
context.lineWidth = 20;
context.strokeStyle = 'rgb(75, 75, 75)';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(400, 37 / .0733);
context.lineTo(246 - 100, 37 / .0733);
context.lineWidth = 20;
context.strokeStyle = 'rgb(75, 75, 75)';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(145, 1000 / 2);
context.lineTo(397 - 252, 39 / 2);
context.lineWidth = 20;
context.strokeStyle = 'rgb(75, 75, 75)';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(400, 1000 / 2);
context.lineTo(400 - 0, 50 / 2);
context.lineWidth = 20;
context.strokeStyle = 'rgb(75, 75, 75)';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.rect(150, 30, 250, 470);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(400, 50 / 2);
context.lineTo(400 - 250, 50 / 2);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(400, 1000 / 2);
context.lineTo(400 - 250, 1000 / 2);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(150, 1000 / 2);
context.lineTo(400 - 250, 50 / 2);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(400, 1000 / 2);
context.lineTo(400 - 0, 50 / 2);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.rect(150, 65, 250, 375);
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'white';
context.stroke();

context.beginPath();
context.moveTo(293, canvas.height / 2.14);
context.lineTo(canvas.width - 730, canvas.height / 2.14);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(293, canvas.height / 2.05);
context.lineTo(canvas.width - 730, canvas.height / 2.05);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(293, canvas.height / 2.135);
context.lineTo(canvas.width - 707, canvas.height / 2.05);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(270, canvas.height / 2.135);
context.lineTo(canvas.width - 730, canvas.height / 2.05);
context.lineWidth = 4;
context.strokeStyle = 'white';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.moveTo(250, canvas.height / 20);
context.lineTo(canvas.width - 690, canvas.height / 20);
context.lineWidth = 8;
context.strokeStyle = 'rgb(100, 100, 100)';
context.lineCap = 'round';
context.stroke();

context.beginPath();
context.arc(canvas.width / 4.5, canvas.height / 20.5, 7, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(50, 50, 120)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'rgb(75, 75, 75)';
context.stroke();

context.beginPath();
context.arc(canvas.width / 4.5, canvas.height / 20.5, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(50, 50, 120)';
context.fill();
context.lineWidth = .3;
context.strokeStyle = 'rgb(75, 75, 75)';
context.stroke();

context.font = '40pt Lucida Grande';
context.fillStyle = 'black';
context.fillText('iPhone', 190, 250);

};

</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
</body>
</html>

Digital Arts

Monday, February 10, 2014

ASCII Project

No comments:

Post a Comment