Meet Kelvin the Alien! Here is his code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
//// COLORS
//head
var alienheadgrd = context.createRadialGradient(440, 0, 50, 300, 60, 250);
alienheadgrd.addColorStop(0, 'lightgray');
alienheadgrd.addColorStop(1, 'gray');
//body
var alienbodygrd = context.createRadialGradient(400, 560, 50, 400, 60, 175);
alienbodygrd.addColorStop(0, 'lightgreen');
alienbodygrd.addColorStop(0.5, 'gray');
alienbodygrd.addColorStop(1, 'black');
// right arm
var rightarmgrd = context.createRadialGradient(525,425,30,300,400,200);
rightarmgrd.addColorStop(0, 'lightgreen');
rightarmgrd.addColorStop(1, 'gray');
//left arm
var leftarmgrd = context.createRadialGradient(220,425,30,200,570,220);
leftarmgrd.addColorStop(0, 'lightgreen');
leftarmgrd.addColorStop(1, 'gray');
//right leg
var rightleggrd = context.createRadialGradient(550,535,30,200,570,220);
rightleggrd.addColorStop(0, 'lightgreen');
rightleggrd.addColorStop(1, 'gray');
///left leg
var leftleggrd = context.createRadialGradient(150,535,30,200,570,220);
leftleggrd.addColorStop(0, 'lightgreen');
leftleggrd.addColorStop(1, 'gray');
//right eye
var righteyegrd = context.createRadialGradient(450,10,30,500,650,300);
righteyegrd.addColorStop(0, 'gray');
righteyegrd.addColorStop(1, 'black');
///left eye
var lefteyegrd = context.createRadialGradient(350,10,30,500,650,300);
lefteyegrd.addColorStop(0, 'gray');
lefteyegrd.addColorStop(1, 'black');
///background rect
//// SHAPES
///rect
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(10,22,92)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
/// planet - ground
context.beginPath();
context.rect(0,500,800,600);
context.fillStyle = "rgb(173,154,137)";
context.fill();
context.stroke();
context.closePath();
/// UFO
///custom shape - alien body
context.beginPath();
context.moveTo(400,300);
context.quadraticCurveTo(400,300,400,300);
context.quadraticCurveTo(525,425,450,475);
context.quadraticCurveTo(350,475,350,475);
context.quadraticCurveTo(275,425,400,300);
context.fillStyle = alienbodygrd;
context.fill();
context.stroke();
context.closePath();
/// alien head
context.beginPath();
context.moveTo(400,300); //starting point
context.bezierCurveTo(0,000,800,0,400,300);
context.fillStyle = alienheadgrd;
context.fill();
context.stroke();
context.closePath();
//right eye
context.beginPath();
context.moveTo(450,110);
context.bezierCurveTo(550,250,350,250,450,110)
context.fillStyle = righteyegrd;
context.fill();
context.stroke();
context.closePath();
//left eye
context.beginPath();
context.moveTo(350,110)
context.bezierCurveTo(450,250,250,250,350,110);
context.fillStyle = lefteyegrd;
context.fill();
context.stroke();
context.closePath();
/// nose
context.beginPath();
context.moveTo(395,210);
context.lineTo(395,220);
context.moveTo(405,210);
context.lineTo(405,220);
context.stroke();
context.closePath();
/// mouth
context.beginPath();
context.moveTo(450,240)
context.quadraticCurveTo(400,280,350,240);
context.lineCap = 'round';
context.stroke();
context.closePath();
///alien right arm
context.beginPath();
context.moveTo(445,350)
context.bezierCurveTo(700,500,400,400,445,350);
context.fillStyle = rightarmgrd;
context.fill();
context.stroke();
context.closePath();
//alien left arm
context.beginPath();
context.moveTo(355,350);
context.bezierCurveTo(100,500,400,400,355,350)
context.fillStyle = leftarmgrd;
context.fill();
context.stroke();
context.closePath();
/// right leg
context.beginPath();
context.moveTo(450,475);
context.bezierCurveTo(500,600,400,650,450,475)
context.fillStyle = rightleggrd;
context.fill();
context.stroke();
context.closePath();
///left leg
context.beginPath();
context.moveTo(350,475)
context.bezierCurveTo(400,600,300,650,350,475)
context.fillStyle = leftleggrd;
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
//// COLORS
//head
var alienheadgrd = context.createRadialGradient(440, 0, 50, 300, 60, 250);
alienheadgrd.addColorStop(0, 'lightgray');
alienheadgrd.addColorStop(1, 'gray');
//body
var alienbodygrd = context.createRadialGradient(400, 560, 50, 400, 60, 175);
alienbodygrd.addColorStop(0, 'lightgreen');
alienbodygrd.addColorStop(0.5, 'gray');
alienbodygrd.addColorStop(1, 'black');
// right arm
var rightarmgrd = context.createRadialGradient(525,425,30,300,400,200);
rightarmgrd.addColorStop(0, 'lightgreen');
rightarmgrd.addColorStop(1, 'gray');
//left arm
var leftarmgrd = context.createRadialGradient(220,425,30,200,570,220);
leftarmgrd.addColorStop(0, 'lightgreen');
leftarmgrd.addColorStop(1, 'gray');
//right leg
var rightleggrd = context.createRadialGradient(550,535,30,200,570,220);
rightleggrd.addColorStop(0, 'lightgreen');
rightleggrd.addColorStop(1, 'gray');
///left leg
var leftleggrd = context.createRadialGradient(150,535,30,200,570,220);
leftleggrd.addColorStop(0, 'lightgreen');
leftleggrd.addColorStop(1, 'gray');
//right eye
var righteyegrd = context.createRadialGradient(450,10,30,500,650,300);
righteyegrd.addColorStop(0, 'gray');
righteyegrd.addColorStop(1, 'black');
///left eye
var lefteyegrd = context.createRadialGradient(350,10,30,500,650,300);
lefteyegrd.addColorStop(0, 'gray');
lefteyegrd.addColorStop(1, 'black');
///background rect
//// SHAPES
///rect
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(10,22,92)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
/// planet - ground
context.beginPath();
context.rect(0,500,800,600);
context.fillStyle = "rgb(173,154,137)";
context.fill();
context.stroke();
context.closePath();
/// UFO
///custom shape - alien body
context.beginPath();
context.moveTo(400,300);
context.quadraticCurveTo(400,300,400,300);
context.quadraticCurveTo(525,425,450,475);
context.quadraticCurveTo(350,475,350,475);
context.quadraticCurveTo(275,425,400,300);
context.fillStyle = alienbodygrd;
context.fill();
context.stroke();
context.closePath();
/// alien head
context.beginPath();
context.moveTo(400,300); //starting point
context.bezierCurveTo(0,000,800,0,400,300);
context.fillStyle = alienheadgrd;
context.fill();
context.stroke();
context.closePath();
//right eye
context.beginPath();
context.moveTo(450,110);
context.bezierCurveTo(550,250,350,250,450,110)
context.fillStyle = righteyegrd;
context.fill();
context.stroke();
context.closePath();
//left eye
context.beginPath();
context.moveTo(350,110)
context.bezierCurveTo(450,250,250,250,350,110);
context.fillStyle = lefteyegrd;
context.fill();
context.stroke();
context.closePath();
/// nose
context.beginPath();
context.moveTo(395,210);
context.lineTo(395,220);
context.moveTo(405,210);
context.lineTo(405,220);
context.stroke();
context.closePath();
/// mouth
context.beginPath();
context.moveTo(450,240)
context.quadraticCurveTo(400,280,350,240);
context.lineCap = 'round';
context.stroke();
context.closePath();
///alien right arm
context.beginPath();
context.moveTo(445,350)
context.bezierCurveTo(700,500,400,400,445,350);
context.fillStyle = rightarmgrd;
context.fill();
context.stroke();
context.closePath();
//alien left arm
context.beginPath();
context.moveTo(355,350);
context.bezierCurveTo(100,500,400,400,355,350)
context.fillStyle = leftarmgrd;
context.fill();
context.stroke();
context.closePath();
/// right leg
context.beginPath();
context.moveTo(450,475);
context.bezierCurveTo(500,600,400,650,450,475)
context.fillStyle = rightleggrd;
context.fill();
context.stroke();
context.closePath();
///left leg
context.beginPath();
context.moveTo(350,475)
context.bezierCurveTo(400,600,300,650,350,475)
context.fillStyle = leftleggrd;
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
No comments:
Post a Comment