<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////////////////////////////sky//////////
var x = 0;
var y = 0;
var width = 800;
var height = 800;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = '#66DDEE';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#66DDEE';
context.stroke()
/////////////////////////////////////////////////////sun/////////////
var centerX = canvas.width / 6;
var centerY = canvas.height / 7;
var radius = 80;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFFF99");
grd.addColorStop(1, "#FFFF33");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFFF33";
context.stroke();
///////////////////////////////////////////////////hair
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2.15;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#CC9944";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "CC9944";
context.stroke();
////////////////////////////////////////////////////MOREHAIR
context.beginPath();
context.rect(470, 235, 130, 200);
context.fillStyle = '#CC9944';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC9944';
context.stroke()
/////////////////////////////////////////////////////face/////////////
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 60;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFCC99");
grd.addColorStop(1, "#FFCC99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCC99";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment