ART 210: May 2012

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start here

/////BACKGROUND

for (var i=0; i<canvas.height; i+=20) {

// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas

context.rect(0,0, canvas.width, canvas.height);

// inner circle

var circ1X = i;

var circ1Y = 10;

var circ1Radius = 100;

// outer circle

var circ2X = i;

var circ2Y = 10;

var circ2Radius = 200;

// create radial gradient

var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);

// inner color

grd.addColorStop(0, "ffff33");

// you can add intermediate colors using N greater than 0 and smaller then 1

var N = .2;

grd.addColorStop(N, "ffff66");

// outer color

grd.addColorStop(1, "00bfff");

context.fillStyle = grd;

context.fill();

}

//////// LUNA'S BODY

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width/2, canvas.height*.90, 175, 0, Math.PI*2, true);

context.lineWidth = 5;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.fillStyle = "000000";

context.fill();

context.stroke();

////////// LUNA'S WHITE CHEST

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width*.5, canvas.height, 130, 0, Math.PI, true);

context.strokeStyle = "ffffff";

context.lineWidth = 5;

context.lineCap = "round" // "square" or "butt"

context.fillStyle = 'ffffff'; // or '#FF0388'

// give the command to fill the SHAPE

context.fill();

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.stroke();

///////////////FACE

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width/2, canvas.height/2, 170, 0, Math.PI*2, true);

context.lineWidth = .01;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "000000"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.strokeStlye = "000000"

context.fillStyle = "000000";

context.fill();

context.stroke();

//// tongue

context.beginPath();

// x and y coordinates of the tracing circle

var circlecenterX = canvas.width*.50; // x coordinate

var circlecenterY = canvas.height*.7; // y coordinate

// radius of the tracing circle

var radius = 35;

// Math.PI is HALF the circle, 2*Math.PI is the full circle

// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

// draw the arc clockwise or counterclockwise

var counterClockwise = true; // if set to true it draws the complimentary arc

// draw the arc

context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);

context.strokeStyle = 'ff6699';

context.fillStyle = 'ff6699';

context.fill();

context.stroke();

/////////////MOUTH

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width*.5, canvas.height*.55, 80, 0, Math.PI, false);

context.strokeStyle = "ffffff";

context.lineWidth = 7;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.stroke();

/////////////// LEFT EYE

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width*.42, canvas.height*.43, 33, 0, Math.PI*2, false);

context.lineWidth = 2;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.strokeStyle = '000000';

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.stroke();

//////////////// LEFT PUPIL

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width*.42, canvas.height*.43, 16, 0, Math.PI*2, false);

context.lineWidth = 16;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.strokeStyle = "000000";

context.stroke();

//////////////////RIGHT EYE

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width*.58, canvas.height*.43, 33, 0, Math.PI*2, false);

context.lineWidth = 2;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.strokeStyle = "000000";

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.stroke();

/////////////// RIGHT PUPIL

context.beginPath();

//context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise

context.arc(canvas.width*.58, canvas.height*.43, 16, 0, Math.PI*2, false);

context.lineWidth = 16;

context.lineCap = "round" // "square" or "butt"

// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "rgb(255,0,0)" // RED, GREEN, BLUE // #ccffff

context.strokeStyle = "000000";

context.stroke();

//////////// RIGHT EAR

// Set the style properties.

context.fillStyle = '000000';

context.strokeStyle = '000000';

context.lineWidth = 2;

context.beginPath();

context.moveTo(525, 200); // give the (x,y) coordinates

context.lineTo(425, 50); //

context.lineTo(425, 150);

context.lineTo(525, 200);

context.fill();

context.stroke();

context.closePath();

///////right inner ear

// Set the style properties.

context.fillStyle = 'ffffff';

context.strokeStyle = 'ffffff';

context.lineWidth = 2;

context.beginPath();

context.moveTo(500, 180); // give the (x,y) coordinates

context.lineTo(440, 90); //

context.lineTo(440, 140);

context.lineTo(500, 180);

context.fill();

context.stroke();

context.closePath();

//////////// LEFT EAR

// Set the style properties.

context.fillStyle = '000000';

context.strokeStyle = '000000';

context.lineWidth = 2;

context.beginPath();

// Start from the top-left point.

context.moveTo(375, 150); // give the (x,y) coordinates

context.lineTo(375, 50); //

context.lineTo(275, 200);

context.lineTo(375, 150);

context.fill();

context.stroke();

context.closePath();

//////// LEFT INNER EAR

// Set the style properties.

context.fillStyle = 'ffffff';

context.strokeStyle = 'ffffff';

context.lineWidth = 2;

context.beginPath();

// Start from the top-left point.

context.moveTo(360, 140); // give the (x,y) coordinates

context.lineTo(360, 90); //

context.lineTo(305, 175);

context.lineTo(360, 140);

context.fill();

context.stroke();

context.closePath();

////////////////////////////////////// end here

};

</script>

</head>

<body>

</body>

</html>

ART 210

Monday, May 28, 2012

canvas_HTML 5

Tuesday, May 22, 2012

Introduction