Monday, May 28, 2012

canvas_HTML 5









<!DOCTYPE HTML>
<html>
<head>
<script>
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>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

No comments:

Post a Comment