Coding
My first assignment in Digital Arts. I used Text Wrangler to play around with coding in order to create an image with multiple shapes and gradients.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS 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);
}
#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
///sky and water
var grd = context.createLinearGradient(200,200,200,400);
grd.addColorStop(0, "rgba(220,119,125,1)");
grd.addColorStop(0.1, "rgba(255,155,100,1)");
grd.addColorStop(0.2, "rgba(255,100,80,1)");
grd.addColorStop(0.7, "rgba(102,247,220,1)");
grd.addColorStop(0.8, "rgba(100,255,255,1)");
grd.addColorStop(1.0, "rgba(10,230,255,1)");
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = grd;
context.fill();
context.closePath();
////sun
var grd = context.createLinearGradient(200,200,200,400);
grd.addColorStop(0, "rgba(255,80,100,1)");
grd.addColorStop(0.3, "rgba(255,155,100,1)");
grd.addColorStop(0.5, "rgba(255,30,80,.5)");
grd.addColorStop(0.7, "rgba(102,247,220,.5)");
grd.addColorStop(0.8, "rgba(102,247,220,.6)");
grd.addColorStop(1.0, "rgba(10,230,255,1)");
context.beginPath();
context.arc(400,300,200,0*Math.PI, 2*Math.PI, true);
context.fillStyle = grd;
context.fill();
context.closePath();
///shark
context.beginPath();
context.moveTo(500,520);
context.quadraticCurveTo(550,400,450,520);
context.fillStyle = "rgba(111,121,132,1)";
context.fill();
context.closePath();
///pole
context.beginPath();
context.rect(280,300,20,150);
context.fillStyle = "rgba(191,111,66,1)";
context.fill();
context.lineWidth = 5;
context.closePath();
///flag
var grd = context.createLinearGradient(200,200,200,400);
grd.addColorStop(0.3, "rgba(20,100,250,1)");
grd.addColorStop(0.5, "rgba(255,255,255,1)");
grd.addColorStop(1, "rgba(255,30,20,1)");
context.beginPath();
context.rect(270,280,100,50);
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.closePath();
/// sailboat
var grd = context.createLinearGradient(200,200,200,400);
grd.addColorStop(0.2, "rgba(239,199,144,1)");
grd.addColorStop(0.5, "rgba(234,172,123,1)");
grd.addColorStop(1, "rgba(195,136,85,1)");
context.beginPath();
context.moveTo(450,400);
context.quadraticCurveTo(300,555,200,400);
context.fillStyle = grd;
context.fill();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
</script>
</body>
</html>
No comments:
Post a Comment