I was asked " what is your favorite piece of code? ".
I checked my old projects, most of the codes/modules are very complex and not easy to code....these can be considered as good and smart codes/applications, but I don't think it's my favorite one.
Then, something came into my mind...wow, now, I got my current favorite piece of code...yeahhh...
I like cartoon, and this one also made me think of creating a game and mobile app....:)
I checked my old projects, most of the codes/modules are very complex and not easy to code....these can be considered as good and smart codes/applications, but I don't think it's my favorite one.
Then, something came into my mind...wow, now, I got my current favorite piece of code...yeahhh...
I like cartoon, and this one also made me think of creating a game and mobile app....:)
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvasSmile" width="1000" height="400"></canvas>
<canvas id="canvasRun" width="1000" height="400"></canvas>
<script>
var canvas = document.getElementById('canvasSmile');
var ctx = canvas.getContext('2d');
var canvasRun= document.getElementById('canvasRun');
var ctxRun= canvasRun.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var face_radius = 70;
var mouth_radius=40;
var eye_radius=10;
var Shine_radius= face_radius *2;
var variant= face_radius-mouth_radius;
var run_radius= face_radius;
//--- DRAW THE FACE CIRCLE---------
ctx.beginPath();
ctx.arc(centerX, centerY, face_radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
//---DRAW THE MOUTH----------
ctx.beginPath();
ctx.arc(centerX, centerY, mouth_radius,1/4, Math.PI-(1/4), false);
ctx.lineWidth=10;
ctx.stroke();
//----DRAW THE LEFT EYE----------
ctx.beginPath();
ctx.arc(centerX - variant, centerY - variant, eye_radius, 0, 2* Math.PI, false);
ctx.fillStyle='red';
ctx.fill();
//----DRAW THE RIGHT EYE----------
ctx.beginPath();
ctx.arc(centerX + variant, centerY - variant, eye_radius, 0, 2* Math.PI, false);
ctx.fillStyle='red';
ctx.fill();
//----DRAW THE LINE AROUND THE CIRCLE---------
for(var p=0; p<= 2* Math.PI; p+=(2 * Math.PI)/10)
{
var x1= centerX + face_radius * Math.cos(p);
var y1=centerY + face_radius * Math.sin(p);
var x2= centerX + Shine_radius * Math.cos(p);
var y2=centerY + Shine_radius * Math.sin(p);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo (x2,y2);
ctx.lineWidth=3;
ctx.stroke();
}
ctx.closePath();
var func=CircleRun;
var run=setInterval(func,300);
//-------RUNNING CIRCLE-------
function CircleRun()
{
run_radius+=10;
if(run_radius >Shine_radius)
{
run_radius=face_radius;
ctxRun.clearRect(0,0,1000,400);
}
ctxRun.beginPath();
ctxRun.arc(centerX, centerY, run_radius, 0,2 * Math.PI, false);
ctxRun.lineWidth=1;
ctxRun.strokeStyle='yellow';
ctxRun.stroke();
}
</script>
</body>
</html>
<html>
<head>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvasSmile" width="1000" height="400"></canvas>
<canvas id="canvasRun" width="1000" height="400"></canvas>
<script>
var canvas = document.getElementById('canvasSmile');
var ctx = canvas.getContext('2d');
var canvasRun= document.getElementById('canvasRun');
var ctxRun= canvasRun.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var face_radius = 70;
var mouth_radius=40;
var eye_radius=10;
var Shine_radius= face_radius *2;
var variant= face_radius-mouth_radius;
var run_radius= face_radius;
//--- DRAW THE FACE CIRCLE---------
ctx.beginPath();
ctx.arc(centerX, centerY, face_radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#FF0000';
ctx.stroke();
//---DRAW THE MOUTH----------
ctx.beginPath();
ctx.arc(centerX, centerY, mouth_radius,1/4, Math.PI-(1/4), false);
ctx.lineWidth=10;
ctx.stroke();
//----DRAW THE LEFT EYE----------
ctx.beginPath();
ctx.arc(centerX - variant, centerY - variant, eye_radius, 0, 2* Math.PI, false);
ctx.fillStyle='red';
ctx.fill();
//----DRAW THE RIGHT EYE----------
ctx.beginPath();
ctx.arc(centerX + variant, centerY - variant, eye_radius, 0, 2* Math.PI, false);
ctx.fillStyle='red';
ctx.fill();
//----DRAW THE LINE AROUND THE CIRCLE---------
for(var p=0; p<= 2* Math.PI; p+=(2 * Math.PI)/10)
{
var x1= centerX + face_radius * Math.cos(p);
var y1=centerY + face_radius * Math.sin(p);
var x2= centerX + Shine_radius * Math.cos(p);
var y2=centerY + Shine_radius * Math.sin(p);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo (x2,y2);
ctx.lineWidth=3;
ctx.stroke();
}
ctx.closePath();
var func=CircleRun;
var run=setInterval(func,300);
//-------RUNNING CIRCLE-------
function CircleRun()
{
run_radius+=10;
if(run_radius >Shine_radius)
{
run_radius=face_radius;
ctxRun.clearRect(0,0,1000,400);
}
ctxRun.beginPath();
ctxRun.arc(centerX, centerY, run_radius, 0,2 * Math.PI, false);
ctxRun.lineWidth=1;
ctxRun.strokeStyle='yellow';
ctxRun.stroke();
}
</script>
</body>
</html>
No comments:
Post a Comment