<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas hw01</title>
</head>
<body>
</body>
</html>
<!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
//TRIANGLE 1 DARK PINK
context.beginPath();
context.moveTo(1,400); // STARTING POINT
context.lineTo(200,600);
context.lineTo(200,200);
context.lineTo(1,400);
// ENDING POINT
context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(224, 15, 119, 0.97)'
context.stroke();
context.fillStyle= 'rgba(224, 15, 119, 0.76)'
context.fill()
context.closePath();
//TRIANGLE 2 LIGHT BLUE
context.beginPath();
context.moveTo(200,400); // STARTING POINT
context.lineTo(400,600);
context.lineTo(400,200);
context.lineTo(200,400);
// ENDING POINT
context.lineWidth=15
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(63, 191, 184, 0.57)'
context.stroke();
context.fillStyle= 'rgba(63, 191, 184, 0.15)'
context.fill()
context.closePath();
//TRIANGLE 3 GREEN
context.beginPath();
context.moveTo(400,600); // STARTING POINT
context.lineTo(600,400);
context.lineTo(400,200);
context.lineTo(400,600);
// ENDING POINT
context.lineWidth=15
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(70, 191, 63, 0.8)'
context.stroke();
context.fillStyle= 'rgba(70, 191, 63, 0.56)'
context.fill()
context.closePath();
//TRIANGLE 4 DARK PURPLE
context.beginPath();
context.moveTo(600,600); // STARTING POINT
context.lineTo(600,200);
context.lineTo(800,400);
context.lineTo(600,600);
// ENDING POINT
context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(43, 6, 79, 0.93)'
context.stroke();
context.fillStyle= 'rgba(43, 6, 79, 0.8)'
context.fill()
context.closePath();
//TRIANGLE 5 RED
context.beginPath();
context.moveTo(215,355); // STARTING POINT
context.lineTo(355,200);
context.lineTo(215,200);
context.lineTo(215,355);
// ENDING POINT
context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(245, 15, 15, 0.89)'
context.stroke();
context.fillStyle= 'rgba(245, 15, 15, 0.74)'
context.fill()
context.closePath();
//TRIANGLE 6 ORANGE
context.beginPath();
context.moveTo(215,445); // STARTING POINT
context.lineTo(345,600);
context.lineTo(215,600);
context.lineTo(215,445);
// ENDING POINT
context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgb(251, 132, 13)'
context.stroke();
context.fillStyle= 'rgba(251, 132, 13, 0.71)'
context.fill()
context.closePath();
//TRIANGLE 7 YELLOW
context.beginPath();
context.moveTo(580,345); // STARTING POINT
context.lineTo(445,200);
context.lineTo(580,200);
context.lineTo(580,345);
// ENDING POINT
context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(255, 255, 35, 0.99)'
context.stroke();
context.fillStyle= 'rgba(241, 253, 6, 0.43)'
context.fill()
context.closePath();
//TRIANGLE 8 BLACK
context.beginPath();
context.moveTo(580,600); // STARTING POINT
context.lineTo(445,600);
context.lineTo(580,445);
context.lineTo(580,600);
// ENDING POINT
context.lineWidth=5
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(2, 0, 5, 0.98)'
context.stroke();
context.fillStyle= 'rgba(11, 11, 3, 0.64)'
context.fill()
context.closePath();
//TRIANGLE 9 LIGHT PURPLE
context.beginPath();
context.moveTo(600,545); // STARTING POINT
context.lineTo(600,250);
context.lineTo(750,400);
context.lineTo(600,545);
// ENDING POINT
context.lineWidth=10
context.lineCap = 'round';
context.lineJoin= 'round'
context.strokeStyle= 'rgba(40, 31, 147, 0.83)'
context.stroke();
context.fillStyle= 'rgba(128, 119, 222, 0.96)'
context.fill()
context.closePath();
//TRIANGLE 10 LIGHT PINK
context.beginPath();
context.moveTo(50,400); // STARTING POINT
context.lineTo(200,550);
context.lineTo(200,250);
context.lineTo(50,400);
// ENDING POINT
context.lineWidth=10
context.lineCap ='round'
context.lineJoin= 'round'
context.strokeStyle= 'rgba(191, 63, 116, 0.89)'
context.stroke();
context.fillStyle= 'rgba(237, 186, 207, 0.64)'
context.fill()
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 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 HW Kim Conroy - CANVAS PROJECT', 20, 550);
context.closePath();
</script>
</body>
</html>
No comments:
Post a Comment