Tuesday, September 18, 2012
Wednesday, September 12, 2012
HTML5
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 300;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 400;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 400;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 500;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 550;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 500;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 500;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 450;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 500;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 700;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 700;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 278;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 278;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 150;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 150;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
//////// BEZIER CURVE
for (var i=0; i<canvas.height; i+=10) {
var startX = 3;
var startY = 100;
// starting point coordinates
var endX = 9000;
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();
}
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 500;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 450;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 200);
// light blue
grd.addColorStop(0, "#8ED6FF");
// dark blue
grd.addColorStop(1, "#004CB3");
context.fillStyle = grd;
context.fill();
// add stroke
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(200, 150, 100, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
The design is an abstract bird that's flying past a cloud with a piece of green plastic in it's mouth. It was created using codes from a couple of online tutorials and editing the number until it resembled what I wanted. This was a really challenging project, HTML is difficult to grasp.
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 300;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 400;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 400;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 500;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 550;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 500;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 500;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,155,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 450;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 500;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 700;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 700;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 278;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 278;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 150;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 150;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
//////// BEZIER CURVE
for (var i=0; i<canvas.height; i+=10) {
var startX = 3;
var startY = 100;
// starting point coordinates
var endX = 9000;
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();
}
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 500;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 450;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,255)";
context.stroke();
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 200);
// light blue
grd.addColorStop(0, "#8ED6FF");
// dark blue
grd.addColorStop(1, "#004CB3");
context.fillStyle = grd;
context.fill();
// add stroke
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(200, 150, 100, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
The design is an abstract bird that's flying past a cloud with a piece of green plastic in it's mouth. It was created using codes from a couple of online tutorials and editing the number until it resembled what I wanted. This was a really challenging project, HTML is difficult to grasp.
Subscribe to:
Comments (Atom)