Dear blog, this is my canvas final project. I had stressful moments during this assignment. At the beginning was hard to understand how to use these codes in order to create great images. Finally, after three days of trying different codes, I managed to create this car on a road with mountains. I know it does not look complex, but I felt really proud of myself when I finished this one.
My code:
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS FINAL PROJECT </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}
body {
background-color: rgba(255,255,255,1.00);
}
#myCanvas { border: rgba(102,0,255,1) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
context.rect(0,0,800,600);
// add linear gradient
var grd = context.createLinearGradient(0,0, 800, 600);
// light blue
grd.addColorStop(0, '#0ECFDF');
// dark blue
grd.addColorStop(1, '#085398');
context.fillStyle = grd;
context.fill();
//shape
context.beginPath();
context.rect(10, 480, 780, 50);
context.fillStyle = 'gray';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
context.rect(10,480,780,50);
// add linear gradient
var grd = context.createLinearGradient(0,0, 800, 600);
// light gray
grd.addColorStop(0, '#BDB8B8');
// dark gray
grd.addColorStop(1, '#494545');
context.fillStyle = grd;
context.fill();
//shape
context.beginPath();
context.rect(500, 350, 200, 70);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(550, 250, 100, 100);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
var centerX = canvas.width / 2;
var centerY = canvas.height /5;
var radius = 30;
context.beginPath();
context.arc(550, 450, radius, 0, 4 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blck';
context.stroke();
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 30;
context.beginPath();
context.arc(650, 450, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(500, 350, 30, 30);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(605, 265, 30, 70);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(560, 265, 30, 70);
context.fillStyle = ' blue';
context.fill();
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(0, 250);
context.quadraticCurveTo(288, 0, 450, 200);
context.lineWidth = 10;
// line color
context.fillStyle ='green'
context.fill()
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(390, 250);
context.quadraticCurveTo(550, 0, 800, 200);
context.lineWidth = 10;
// line color
context.fillStyle ='green'
context.fill()
context.strokeStyle = 'black';
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 - Victoria Perez', 20, 550);
context.closePath();
</script>
</body>
</html>
Comentarios
Publicar un comentario