I found inspiration through one of the templates we were sent and began there. I started with the largest square and worked my way in to the smallest. Then changed the colors to black and white for the visual effect. I then added the quadratic curve and changed the color. Then I added the Bezier curves to the background, and changed the line thickness of the squares to where you could see the background colors behind the square.
Total Hours; 2 1/2
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// this needs to be included with the repeat once in a document
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
// BORDER + BKGD
context2.beginPath();
context2.rect(0,0,canvas.width,canvas.height);
context2.strokeStyle = "black";
context2.lineWidth = 70
context2.stroke();
context2.closePath();
// SMALLER SQUARE
context2.beginPath();
context2.rect(60,50,480,500);
context2.strokeStyle = "white";
context2.lineWidth = 30;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(90,80,420,440);
context2.strokeStyle = "black";
context2.lineWidth = 20;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(120,110,360,380);
context2.strokeStyle = "white";
context2.lineWidth = 18;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(140,130,320,340);
context2.strokeStyle = "black";
context2.lineWidth = 17;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(160,150,280,300);
context2.strokeStyle = "white";
context2.lineWidth = 16;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(178,168,244,264);
context2.strokeStyle = "black";
context2.lineWidth = 15;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(190,180,220,240);
context2.strokeStyle = "white";
context2.lineWidth = 10;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(200,190,200,220);
context2.strokeStyle = "black";
context2.lineWidth = 9.5;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(210,200,180,200);
context2.strokeStyle = "white";
context2.lineWidth = 9;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(220,210,160,180);
context2.strokeStyle = "black";
context2.lineWidth = 8.5;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(230,220,140,160);
context2.strokeStyle = "white";
context2.lineWidth = 8;
context2.stroke();
context2.closePath();
context2.beginPath();
context2.rect(240,230,120,140);
context2.strokeStyle = "black";
context2.lineWidth = 7.5;
context2.stroke();
context2.beginPath();
context2.rect(250,240,100,120);
context2.strokeStyle = "white";
context2.lineWidth =7;
context2.stroke();
context2.beginPath();
context2.rect(260,250,80,100);
context2.strokeStyle = "black";
context2.lineWidth = 6.5;
context2.stroke();
context2.beginPath();
context2.rect(270,260,60,80);
context2.strokeStyle = "white";
context2.lineWidth = 6;
context2.stroke();
context2.beginPath();
context2.rect(280,270,40,60);
context2.strokeStyle = "black";
context2.lineWidth = 5.5;
context2.stroke();
context2.beginPath();
context2.rect(290,280,20,40);
context2.strokeStyle = "white";
context2.lineWidth = 5;
context2.stroke();
context2.beginPath();
context2.rect(300,290,0,20);
context2.strokeStyle = "black";
context2.lineWidth = 5;
context2.stroke();
for (var yay=-1500; yay<canvas.height; yay+=7) {
var startX = 1000;
var startY = yay-2000;
var endX = canvas.width;
var endY = canvas.height;
var cpointX = yay+200;
var cpointY = -yay;
context.beginPath();
context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
//context.closePath();
context.strokeStyle = "rgb(200,0,0)";
context.fillStyle = "rgb(0,0,255)";
context.fill();
context.lineWidth = 2;
context.stroke();
}
/////// BEZIER CURVE 1 on right side
for (var i=0; i<canvas.height; i+=10) {
var startX = 3;
var startY = 800;
var endX = 1000;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 275;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(64,224,208)";
context.stroke();
}
var x = 0;
var y = 0;
var cpointX = canvas.width / 2 - 0
var cpointY = canvas.height / 2 - 0
;
var x1 = 600;
var y1 = 0;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 15;
context.strokeStyle = "rgb(64,224,208)";
context.stroke();
//context.save();
context.translate(canvas.width/2,canvas.height/2);
context.rotate(Math.PI/4);
context.drawImage(canvas2,-canvas.width/2,-canvas.height/2);
//context.restore();
Comments
Post a Comment