I found this particular project to be very frustrating and time-consuming. I struggled trying to find the exact coordinates of where I wanted to place my shapes on the graph. I decided to make an abstract portrait because I enjoy abstract pieces of art. I chose to use different shapes and vibrant colors to make the image appealing to the eye. I think that my piece is successful because it is interesting to look at and uses a wide variety of shapes.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Black rectangle
context.beginPath();
context.rect(0, 300, 800, 300);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//Red rectangle
context.beginPath();
context.rect(300, 200, 800, 300)
context.fillStyle = 'red';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'red'
context.stroke();
//blue rectangle
context.beginPath();
context.rect(350, 250, 390, 210)
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'blue'
context.stroke();
//blue left rectangle
context.beginPath();
context.rect(0, 0, 295, 300)
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'blue'
context.stroke();
//yellow square
context.beginPath();
context.rect(25, 25, 200, 200)
context.fillStyle = 'white';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'white'
context.stroke();
//top right black rectangle
context.beginPath();
context.rect(300, 0, 800, 200);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//circle
context.beginPath();
context.arc(100, 100, 75, 0 , 2 * Math.PI, false);
var grd = context.createLinearGradient(300, 200, 500, 200);
grd.addColorStop(0, 'rgb(0 ,0 ,0)');
grd.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
//bezier curve 2
for (var i=0; i<canvas.height; i+=10) {
var startX = -2000;
var startY = +3000;
// starting point coordinates
var endX = 50;
var endY = -3000;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 400;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "hotpink";
context.stroke();
}
//circle bezier curve
for (var i=0; i<canvas.height; i+=10) {
var startX = -3;
var startY = -10;
// starting point coordinates
var endX = -1000;
var endY = -i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = 400;
var cpoint2Y = 1200;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(186,252,4)";
context.stroke();
}
//triangle
context.beginPath();
context.moveTo(400,10)
context.lineTo(300,150)
context.lineTo(500,150)
context.lineTo(400,10)
context.lineWidth = 5;
context.strokeStyle = 'rgb(255,102,153)';
context.fillStyle = 'rgb(255,102,153)';
context.fill();
context.stroke();
//vertical yellow line
context.beginPath();
context.moveTo(700, 0);
context.lineTo(700, 800);
context.lineWidth = 10;
context.strokeStyle = 'yellow';
context.stroke();
//horizontal line
context.beginPath();
context.moveTo(0, 450);
context.lineTo(800, 450);
context.lineWidth = 10;
context.strokeStyle = 'purple';
context.stroke();
//white square
context.beginPath();
context.rect(485, 300, 90, 90)
context.fillStyle = 'white';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'white'
context.stroke();
//black small sqaure
context.beginPath();
context.rect(495, 310, 70, 70)
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black'
context.stroke();
//small circle
context.beginPath();
context.arc(768, 470, 13, 0 , 2 * Math.PI, true);
context.lineWidth =1;
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment