The Office
Thursday, February 11, 2016
Friday, February 5, 2016
Thursday, February 4, 2016
Coding Canvas (Dreamweaver) Project 1
<!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
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = "rgba(0,191,191,1)";
context.fill();
context.closePath();
context.beginPath();
//RECT1
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba(255,0,0,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(255,0,255,1)");
grd.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.rect(00,00,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE1
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,2545,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(100,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT2
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba(0,255,0,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(255,0,255,1)");
grd.addColorStop(1, "rgba( 153, 0, 255 ,1)"); // ENDING COLOR
context.beginPath();
context.rect(200,0,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE2
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(300,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT3
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 251, 140, 0 ,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba( 241, 196, 15 ,1)"); // ENDING COLOR
context.beginPath();
context.rect(400,0,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE3
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(500,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT4
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba( 216, 27, 96,1)"); // ENDING COLOR
context.beginPath();
context.rect(600,0,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE4
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(700,100,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT5
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba( 102, 255, 153,1)"); // ENDING COLOR
context.beginPath();
context.rect(00,140,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE5
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(100,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT6
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(102, 255, 153,1)");
grd.addColorStop(1, "rgba( 255, 255, 153,1)"); // ENDING COLOR
context.beginPath();
context.rect(200,140,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE6
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(300,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT7
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(145, 255, 153,1)");
grd.addColorStop(1, "rgba( 0, 255, 153,1)"); // ENDING COLOR
context.beginPath();
context.rect(400,140,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE7
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,0,255,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(255,255,0,1)");
grd2.addColorStop(1, "rgba(0,255,0,1)"); // ENDING COLOR
context.beginPath();
context.arc(500,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT8
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 255, 255, 13,1)"); // ENDING COLOR
context.beginPath();
context.rect(600,140,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE8
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,255,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(700,250,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT9
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 255, 255, 13,1)"); // ENDING COLOR
context.beginPath();
context.rect(00,280,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE9
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,255,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(100,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT10
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 0, 255, 13,1)"); // ENDING COLOR
context.beginPath();
context.rect(200,280,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE10
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,0,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(300,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT11
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 153, 0, 255,1)"); // ENDING COLOR
context.beginPath();
context.rect(400,280,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE11
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,0,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(500,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT12
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 0, 255, 13,1)"); // ENDING COLOR
context.beginPath();
context.rect(600,280,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE12
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(216,0,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(700,390,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT13
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 153, 0, 255,1)"); // ENDING COLOR
context.beginPath();
context.rect(000,420,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE13
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,0,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(100,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT14
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 120, 166, 154 ,1)"); // ENDING COLOR
context.beginPath();
context.rect(200,420,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE14
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,255,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(300,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT15
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 255, 112, 67 ,1)"); // ENDING COLOR
context.beginPath();
context.rect(400,420,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE15
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba(155,255,40,1)"); // ENDING COLOR
context.beginPath();
context.arc(500,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//RECT16
var grd = context.createLinearGradient(200,000,200,150);
grd.addColorStop(0, "rgba( 216, 27, 96,1)"); // STARTING COLOR
grd.addColorStop(0.5, "rgba(45, 255, 153,1)");
grd.addColorStop(1, "rgba( 186, 104, 200,1)"); // ENDING COLOR
context.beginPath();
context.rect(600,420,200,140);
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////
//CIRCLE16
var grd2 = context.createLinearGradient(200,00,600,300);
grd2.addColorStop(0, "rgba(255,275,55,1)"); // STARTING COLOR
grd2.addColorStop(0.5, "rgba(155,2,0,1)");
grd2.addColorStop(1, "rgba( 3, 169, 244 ,1)"); // ENDING COLOR
context.beginPath();
context.arc(700,530,100,0*Math.PI, 1*Math.PI,true);
context.fillStyle = grd2;
context.fill();
context.closePath();
//EYE TRIPPY
var rdg = context.createRadialGradient(400,300,20,400,300,100);
rdg.addColorStop(0, "rgba(0,0,0,1)");
rdg.addColorStop(0.3, "rgba(0,153,255,1)");
rdg.addColorStop(1, "rgba(255,255,250,1)");
context.beginPath();
context.moveTo(100,300);
context.quadraticCurveTo(400,0,700,300);
context.quadraticCurveTo(400,600,100,300);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();
//EYElID
context.beginPath();
context.moveTo(100,300);
context.quadraticCurveTo(400,100,700,300);
context.quadraticCurveTo(400,600,100,300);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 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 - LIZ DEGROOT PROJECT_01', 20, 590);
context.closePath();
</script>
</body>
</html>
Subscribe to:
Posts (Atom)