<!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