Friday, 20 March 2015

HTML

For this assignment I had to create and image using just computer coding in HTML format.  I did this using the application TextWrangler.  It is a difficult concept to get your head around, but using a grid system proved helpful, and I heavily relied on trial and error.

I attempted a sun and moon image, as I didn't think the shapes involved would be overly difficult and there wasn't too much detail, however, it still proved a challenge.

I included techniques such as various shapes and line styles, as well as stroke fills and radial gradients.

The code used is as follows:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Variables for Rectangle
var x = 0
var y = 0
var width = 800
var height = 600
var startX = 400;
var startY = 300;
var startRadius = 250;
var endX = 300;
var endY = 400;
var endRadius = 400;

context.beginPath();
context.rect(x, y, width, height);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(220, 255, 220)');
grd.addColorStop(1, 'rgb(0, 0, 100)');
context.lineWidth - 10;
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

// Variables for Circle
var centerx = 400;
var centery = 300;
var radius = 300;
//For Circle
context.beginPath();
context.arc(centerx, centery, radius, 0, 2* Math.PI, false);
context.lineWidth = 6;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

//Variables for Quadratic Curve
var x4 = 500;
var y4 = 15;
var controlx = 160;
var controly = 100;
var endx = 295;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 300;
var y4 = 130;
var controlx = 460;
var controly = 100;
var endx = 295;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 295;
var y4 = 290;
var controlx = 200;
var controly = 400;
var endx = 340;
var endy = 380;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 340;
var y4 = 380;
var controlx = 410;
var controly = 400;
var endx = 390;
var endy = 340;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 450;
var y4 = 220;
var controlx = 550;
var controly = 200;
var endx = 560;
var endy = 300;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 420;
var y4 = 280;
var controlx = 430;
var controly = 350;
var endx = 520;
var endy = 350;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 270;
var y4 = 170;
var controlx = 260;
var controly = 220;
var endx = 330;
var endy = 220;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 680;
var y4 = 400;
var controlx = 480;
var controly = 550;
var endx = 360;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 350;
var y4 = 420;
var controlx = 340;
var controly = 440;
var endx = 360;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 400;
var y4 = 460;
var controlx = 390;
var controly = 430;
var endx = 280;
var endy = 400;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 290;
var y4 = 400;
var controlx = 300;
var controly = 400;
var endx = 300;
var endy = 380;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 280;
var y4 = 455;
var controlx = 340;
var controly = 450;
var endx = 350;
var endy = 425;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 280;
var y4 = 445;
var controlx = 270;
var controly = 420;
var endx = 300;
var endy = 400;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 280;
var y4 = 445;
var controlx = 290;
var controly = 430;
var endx = 315;
var endy = 410;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 410;
var y4 = 380;
var controlx = 430;
var controly = 430;
var endx = 420;
var endy = 450;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 180;
var y4 = 330;
var controlx = 240;
var controly = 350;
var endx = 250;
var endy = 290;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve
var x4 = 200;
var y4 = 325;
var controlx = 240;
var controly = 330;
var endx = 235;
var endy = 300;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.stroke();

//Variables for Quadratic Curve(eyelashes)

var x4 = 205;
var y4 = 360;
var controlx = 200;
var controly = 333;
var endx = 205;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();


var x4 = 220;
var y4 = 360;
var controlx = 210;
var controly = 333;
var endx = 215;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 238;
var y4 = 355;
var controlx = 220;
var controly = 333;
var endx = 228;
var endy = 332;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 251;
var y4 = 347;
var controlx = 235;
var controly = 333;
var endx = 232;
var endy = 328;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 258;
var y4 = 340;
var controlx = 240;
var controly = 330;
var endx = 235;
var endy = 320;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 260;
var y4 = 328;
var controlx = 260;
var controly = 333;
var endx = 240;
var endy = 320;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 265;
var y4 = 320;
var controlx = 260;
var controly = 325;
var endx = 240;
var endy = 315;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 264;
var y4 = 310;
var controlx = 260;
var controly = 315;
var endx = 245;
var endy = 308;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();

var x4 = 264;
var y4 = 300;
var controlx = 260;
var controly = 305;
var endx = 247;
var endy = 303;
//Quadratic Curve
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 2;
context.strokeStyle = 'rgb(150, 150, 150)';
context.stroke();





////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)