I enjoyed this project because I am a huge fan of abstract composition. It was fun to be able to be creative and learn at the same time.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background//
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(0, 600, 800, 0);
grd.addColorStop(0, 'rgb(150,150,150)');
grd.addColorStop(.5, 'rgb(120,75,205)');
grd.addColorStop(1, 'rgb(50,190,90)');
context.fillStyle = grd;
context.fill();
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("A", 25, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('A', 25, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("B", 125, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('B', 125, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("S", 235, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('S', 235, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("T", 325, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('T', 325, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("R", 428, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('R', 428, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("A", 530, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('A', 530, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("C", 635, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('C', 635, 105);
context.font = 'Bold 100px Georgia';
context.fillStyle = 'rgb(0,150,0)';
context.fillText("T", 725, 105);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.strokeText('T', 725, 105);
context.beginPath();
context.arc(450, 485, 200, 0 , 2 * Math.PI, false);
context.stroke();
context.fillStyle = 'rgb(50,0,0)';
context.fill();
context.closePath();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
var tx1 = 600;
var ty1 = 250;
var tx2 = 300;
var ty2 = 200;
var tx3 = 300;
var ty3 = 350;
var startx = 600;
var starty = 200;
var endx = 350;
var endy = 300;
context.beginPath();
context.moveTo(tx1, ty1);
context.lineTo(tx2, ty2);
context.lineTo(tx3, ty3);
context.lineTo(tx1, ty1);
context.closePath();
context.lineWidth = 15;
var tx2 = 370;
var ty2 = 650;
var tx3 = 300;
var ty3 = 300;
var tx4 = 500;
var ty4 = 500;
var startx2 = 375;
var starty2 = 300;
var endx2 = 550;
var endy2 = 600;
context.beginPath();
context.moveTo(tx1, ty1);
context.lineTo(tx2, ty2);
context.lineTo(tx3, ty3);
context.lineTo(tx1, ty1);
context.closePath();
context.lineWidth = 15;
var tx3 = 300;
var ty3 = 650;
var tx4 = 300;
var ty4 = 300;
var tx5 = 500;
var ty5 = 500;
context.beginPath();
context.moveTo(tx3, ty3);
context.lineTo(tx4, ty4);
context.lineTo(tx5, ty5);
context.lineTo(tx3, ty3);
context.closePath();
context.lineWidth = 15;
//context.fillStyle = 'rgb(230, 230. 230)';
var grd = context.createLinearGradient(startx2, starty2, endx2, endy2);
grd.addColorStop(0, 'rgb(0, 255, 0)');
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
var startx3 = 275;
var starty3 = 300;
var endx3 = 550;
var endy3 = 600;
var tx3 = 600;
var ty3 = 350;
var tx4 = 600;
var ty4 = 600;
var tx5 = 400;
var ty5 = 500;
context.beginPath();
context.moveTo(tx3, ty3);
context.lineTo(tx4, ty4);
context.lineTo(tx5, ty5);
context.lineTo(tx3, ty3);
context.closePath();
context.lineWidth = 15;
//context.fillStyle = 'rgb(230, 230. 230)';
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, 'rgb(0, 255, 0)');
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
var startx4 = 500;
var starty4 = 350;
var endx4 = 250;
var endy4 = 300;
var tx4 = 500;
var ty4 = 350;
var tx5 = 550;
var ty5 = 400;
var tx6 = 420;
var ty6 = 470;
context.beginPath();
context.moveTo(tx4, ty4);
context.lineTo(tx5, ty5);
context.lineTo(tx6, ty6);
context.lineTo(tx4, ty4);
context.closePath();
context.lineWidth = 15;
//context.fillStyle = 'rgb(230, 230. 230)';
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, 'rgb(0, 255, 0)');
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
var startx5 = 950;
var starty5 = 360;
var endx5 = 750;
var endy5 = 900;
var tx5 = 400;
var ty5 = 490;
var tx6 = 680;
var ty6 = 650;
var tx7 = 490;
var ty7 = 650;
context.beginPath();
context.moveTo(tx5, ty5);
context.lineTo(tx6, ty6);
context.lineTo(tx7, ty7);
context.lineTo(tx5, ty5);
context.closePath();
context.lineWidth = 15;
//context.fillStyle = 'rgb(230, 230. 230)';
var grd = context.createLinearGradient(startx5, starty5, endx5, endy5);
grd.addColorStop(0, 'rgb(0, 255, 0)');
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="900" height="800"></canvas>
</body>
</html>
No comments:
Post a Comment