When I first thought about what I wanted to do, I had no idea. I decided to go for an abstract image because it can really be anything you want it to be. I had a hard time getting the hang of HTML with all the different codes and numbers, but this image came out better than I expected. I think my piece is successful because I used a lot of different shapes and colors, I am very pleased with the way it turned out!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle Variables
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
//Black Rectangle
context.beginPath();
context.rect(x, y, width, height);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.rect(65,70,700,500);
context.lineWidth=10;
context. strokeStyle='rgb(100,200,100)';
context. stroke();
//bottom right pink rectangle
context.beginPath();
context.rect(600, 500, 220, 120);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'pink';
context.stroke();
//top right pink rectangle
context.beginPath();
context.rect(600, -20, 220, 120);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'pink';
context.stroke();
//top left pink rectangle
context.beginPath();
context.rect(-20, -20, 220, 120);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'pink';
context.stroke();
//bottom left pink rectangle
context.beginPath();
context.rect(-20, 500, 220, 120);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'pink';
context.stroke();
////Circles
context.beginPath();
context.arc(200,200,350,0,2 * Math.PI,false);
context.strokeStyle = 'rgba(155,155,255,.5)';
context.fillStyle = 'rgba(255,255,255,.5)';
context.fill();
context.stroke();
context.beginPath();
context.arc(650,440,250,0,2 * Math.PI,false);
context.strokeStyle = 'rgba(255,155,255,.7)';
context.fillStyle = 'rgba(255,255,255,.7)';
context.fill();
context.stroke();
context.beginPath();
context.arc(100,440,250,0,2 * Math.PI,false);
context.strokeStyle = 'rgba(155,255,155,.5)';
context.fillStyle = 'rgba(155,255,255,.5)';
context.fill();
context.stroke();
context.beginPath();
context.arc(800,100,450,0,2 * Math.PI,false);
context.strokeStyle = 'rgba(255,255,155,.2)';
context.fillStyle = 'rgba(255,255,255,.2)';
context.fill();
context.stroke();
context.beginPath();
context.arc(500,400,250,0,2 * Math.PI,false);
context.strokeStyle = 'rgba(224,124,0, .1)';
context.fillStyle = 'rgba(355,155,255, .1)';
context.fill();
context.stroke();
//Bezier Curve 1
for (var i=0; i<canvas.height; i+=10) {
var startX = 500;
var startY = 1500;
// starting point coordinates
var endX = 900;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 200;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(200,0,100)";
context.stroke();
}
//Bezier Curve 2
for (var i=0; i<canvas.height; i+=10) {
var startX = 800;
var startY = 1500;
// starting point coordinates
var endX = 0;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 200;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(200,0,100)";
context.stroke();
}
///////Bezier Curve
////Bezier Curve 1
context.beginPath();
context.moveTo(100,0);
context.bezierCurveTo(300,100,600,600,800,300)
context.strokeStyle = 'white';
context.lineWidth = 5;
context.stroke();
//// Bezier Curve 2 arc
context.beginPath();
context.moveTo(0,200);
context.bezierCurveTo(300,100,600,600,800,300)
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
//// Bezier Curve 3
context.beginPath();
context.moveTo(0,300);
context.bezierCurveTo(300,100,600,600,800,300)
context.strokeStyle = 'white';
context.lineWidth = 5;
context.stroke();
///// Bezier Curve 4
context.beginPath();
context.moveTo(0,400);
context.bezierCurveTo(300,100,600,600,800,300)
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
////Bezier Curve 5
context.beginPath();
context.moveTo(0,500);
context.bezierCurveTo(300,100,600,600,800,300)
context.strokeStyle = 'white';
context.lineWidth = 5;
context.stroke();
////Bezier Curve 6
context.beginPath();
context.moveTo(0,600);
context.bezierCurveTo(300,100,600,600,800,300)
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
/////// BEZIER CURVE 3
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 = "rgb(245, 52, 200)";
context.stroke();
}
for (var i=canvas.width/2; i<canvas.height; i+=30) {
var startX = 80;
var startY = -900;
var endX = 800;
var endY = i;
var r = 1;
var g = 2;
var b = 2;
context.beginPath();
context.strokeStyle = "aqua";
context.lineCap = 'round'; // "butt" "square"
context.lineWidth = i/150;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
}
context.font = 'italic 40pt Calibri ';
context.fillStyle = 'white';
context.fillText('Life is a Crazy Journey', 200, 500);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment