<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var startX = 300;
var startY = 30;
var endX = canvas.width - 50;
var endY = canvas.width / 2;
context.rect(0,0, canvas.width, canvas.height);
var myGradient = context.createLinearGradient(startX, startY, endX, endY);
myGradient.addColorStop(0, "rgb(190,222,157)"); // GREEN
myGradient.addColorStop(1, "rgb(255,255,255)"); // WHITE
context.fillStyle = myGradient;
context.fill();
///// Charlie head//
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 200, Math.PI*0, Math.PI*2, false);
context.lineWidth = 5;
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';/////SKIN COLOR
context.fill();
context.stroke();
};
{
///
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(canvas.width/2, canvas.height/2, 150, Math.PI*0.2, Math.PI*0.8, false);
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
context.counterclockwise
};
/// RIGHT EAR
context.beginPath();
///arc(x, y, radius, startingangle, endingangle, [true | false])
context.arc(575, 300, 55, Math.PI* 0.4, 1.6 * Math.PI, true);
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//NOSE
context.beginPath();
context.arc(400,250,50, Math.PI*1.5, 0.5*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//LEFT EAR
///arc(x, y, radius, startingangle, endingangle, [true | false])
context.beginPath();
context.arc(219,330,40, Math.PI*1.3, 2.6*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
///STRAIGHT LINE
context.beginPath();
context.moveTo(400,100);
//context.lineTo(90,300);
context.stroke();
///LEFT EYE
var centerX = 320;
var centerY = 238;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
///RIGHT EYE
var centerX = 450;
var centerY = 238;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//HAIR
///arc(x, y, radius, startingangle, endingangle, [true | false])
/////////////////
context.beginPath();
context.arc(410,150,30, Math.PI*1.2, 2*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
//////////////
context.beginPath();
context.arc(375,150,40, Math.PI*1.7, 2*Math.PI, true);
context.lineCap = "round";
context.fillStyle = 'rgb(246,204,154)';
context.fill();
context.stroke();
////////////
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment