Hello Friends My Name Is Viraj,Today I Will Create Similing Face On Your Web Page.
Here In This Html Tutorial We Will Create Similing Face In Html/Javascript Code.
Here Is An Example Related To Blog Were We Will Create Similing Face.
Example Below..........
Step 1 :
<!doctype html>
<html lang="en">
<head>
<title>Smiling Face</title>
<meta charset="utf-8" />
<style>
div#main {
margin:0 auto;
text-align:center;
}
div.title {
font-size: 40px;
font-family:monospace;
}
canvas {
}
</style>
<script src="jquery1.10.min.js"></script>
</head>
<body>
<div id="main">
<canvas height="600" width="600" id="face" style="background-color:green">
<p>You need canvas!</p>
</canvas>
</div>
<script>
var canvas = null;
var context = null;
var c_width;
var c_height;
initFace();
function initFace() {
canvas = document.getElementById("face");
context = canvas.getContext("2d");
c_width = canvas.offsetWidth;
c_height = canvas.offsetHeight;
//draw the face
drawSmileyFace();
}
function drawSmileyFace() {
drawFace();
drawLeftEye();
drawRightEye();
drawNose();
drawSmile();
}
function drawFace() {
// face
context.beginPath();
context.arc(c_width/2,
c_height/2,
200,
0,
degreesToRadians(360),
true);
context.fillStyle = "#FFFF00";
context.fill();
context.stroke();
}
function drawLeftEye(dx, dy) {
x = 200;
y = 250;
dx = dx || 0;
x1 = x + parseFloat(dx);
dy = dy || 0;
y1 = y + parseFloat(dy);
// left eye
context.beginPath();
context.arc(x, y, 25, 0, degreesToRadians(360), true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = '#000000';
context.stroke();
//inner left eye
context.beginPath();
context.arc(x1, y1, 20, 0, degreesToRadians(360), true);
context.fillStyle = "#04B4AE";
context.fill();
context.strokeStyle = '#04B4AE';
context.stroke();
}
function drawRightEye(dx, dy) {
x = 400;
y = 250;
dx = dx || 0;
x1 = x + parseFloat(dx);
dy = dy || 0;
y1 = y + parseFloat(dy);
// right eye
context.beginPath();
context.arc(x, y, 25, 0, degreesToRadians(360), true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = '#000000';
context.stroke();
//inner right eye
context.beginPath();
context.arc(x1, y1, 20, 0, degreesToRadians(360), true);
context.fillStyle = "#04B4AE";
context.fill();
context.strokeStyle = '#04B4AE';
context.stroke();
}
function drawNose() {
// nose
context.strokeStyle = '#000000';
context.fillStyle = "#000000";
context.beginPath();
context.moveTo(300, 275);
context.lineTo(325, 300);
context.lineTo(300, 325);
context.lineTo(275, 300);
context.closePath();
context.fill();
}
function drawSmile() {
context.beginPath();
context.arc(300, 350, 75, degreesToRadians(0), degreesToRadians(180), false);
context.stroke();
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
context.clearRect(0, 0, canvas.width, canvas.height);
var eyeY = 250;
var leyeX = 200;
var reyeX = 400;
var ldx = 0;
var rdx = 0;
var ldy = 0;
if (eyeY > mousePos.y) {
ldy = 100 - (mousePos.y/eyeY * 100);
ldy = (ldy * 5) / 100;
ldy = 0 - ldy;
} else {
ldy = 100 - ((c_height - mousePos.y)/(c_height - eyeY) * 100);
ldy = (ldy * 5) / 100;
}
if (leyeX < mousePos.x) {
//left eye
ldx = 100 - ((c_width - mousePos.x)/(c_width - leyeX) * 100);
ldx = (ldx * 5) / 100;
//right eye
rdx = 100 - ((c_width - mousePos.x)/(c_width - reyeX) * 100);
rdx = (rdx * 5) / 100;
} else {
//left eye
ldx = 100 - (mousePos.x/leyeX) * 100;
ldx = (ldx * 5) / 100;
ldx = 0 - ldx;
//right eye
rdx = 100 - (mousePos.x/reyeX) * 100;
rdx = (rdx * 5) / 100;
rdx = 0 - rdx;
}
drawFace();
drawLeftEye(ldx, ldy);
drawRightEye(rdx, ldy);
drawNose();
drawSmile();
}, false);
function degreesToRadians(degrees) {
radians = (degrees * Math.PI)/180;
return radians;
}
</script>
</body>
</html>
Output :
Here In This Html Tutorial We Will Create Similing Face In Html/Javascript Code.
Here Is An Example Related To Blog Were We Will Create Similing Face.
Example Below..........
Step 1 :
<!doctype html>
<html lang="en">
<head>
<title>Smiling Face</title>
<meta charset="utf-8" />
<style>
div#main {
margin:0 auto;
text-align:center;
}
div.title {
font-size: 40px;
font-family:monospace;
}
canvas {
}
</style>
<script src="jquery1.10.min.js"></script>
</head>
<body>
<div id="main">
<canvas height="600" width="600" id="face" style="background-color:green">
<p>You need canvas!</p>
</canvas>
</div>
<script>
var canvas = null;
var context = null;
var c_width;
var c_height;
initFace();
function initFace() {
canvas = document.getElementById("face");
context = canvas.getContext("2d");
c_width = canvas.offsetWidth;
c_height = canvas.offsetHeight;
//draw the face
drawSmileyFace();
}
function drawSmileyFace() {
drawFace();
drawLeftEye();
drawRightEye();
drawNose();
drawSmile();
}
function drawFace() {
// face
context.beginPath();
context.arc(c_width/2,
c_height/2,
200,
0,
degreesToRadians(360),
true);
context.fillStyle = "#FFFF00";
context.fill();
context.stroke();
}
function drawLeftEye(dx, dy) {
x = 200;
y = 250;
dx = dx || 0;
x1 = x + parseFloat(dx);
dy = dy || 0;
y1 = y + parseFloat(dy);
// left eye
context.beginPath();
context.arc(x, y, 25, 0, degreesToRadians(360), true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = '#000000';
context.stroke();
//inner left eye
context.beginPath();
context.arc(x1, y1, 20, 0, degreesToRadians(360), true);
context.fillStyle = "#04B4AE";
context.fill();
context.strokeStyle = '#04B4AE';
context.stroke();
}
function drawRightEye(dx, dy) {
x = 400;
y = 250;
dx = dx || 0;
x1 = x + parseFloat(dx);
dy = dy || 0;
y1 = y + parseFloat(dy);
// right eye
context.beginPath();
context.arc(x, y, 25, 0, degreesToRadians(360), true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = '#000000';
context.stroke();
//inner right eye
context.beginPath();
context.arc(x1, y1, 20, 0, degreesToRadians(360), true);
context.fillStyle = "#04B4AE";
context.fill();
context.strokeStyle = '#04B4AE';
context.stroke();
}
function drawNose() {
// nose
context.strokeStyle = '#000000';
context.fillStyle = "#000000";
context.beginPath();
context.moveTo(300, 275);
context.lineTo(325, 300);
context.lineTo(300, 325);
context.lineTo(275, 300);
context.closePath();
context.fill();
}
function drawSmile() {
context.beginPath();
context.arc(300, 350, 75, degreesToRadians(0), degreesToRadians(180), false);
context.stroke();
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
context.clearRect(0, 0, canvas.width, canvas.height);
var eyeY = 250;
var leyeX = 200;
var reyeX = 400;
var ldx = 0;
var rdx = 0;
var ldy = 0;
if (eyeY > mousePos.y) {
ldy = 100 - (mousePos.y/eyeY * 100);
ldy = (ldy * 5) / 100;
ldy = 0 - ldy;
} else {
ldy = 100 - ((c_height - mousePos.y)/(c_height - eyeY) * 100);
ldy = (ldy * 5) / 100;
}
if (leyeX < mousePos.x) {
//left eye
ldx = 100 - ((c_width - mousePos.x)/(c_width - leyeX) * 100);
ldx = (ldx * 5) / 100;
//right eye
rdx = 100 - ((c_width - mousePos.x)/(c_width - reyeX) * 100);
rdx = (rdx * 5) / 100;
} else {
//left eye
ldx = 100 - (mousePos.x/leyeX) * 100;
ldx = (ldx * 5) / 100;
ldx = 0 - ldx;
//right eye
rdx = 100 - (mousePos.x/reyeX) * 100;
rdx = (rdx * 5) / 100;
rdx = 0 - rdx;
}
drawFace();
drawLeftEye(ldx, ldy);
drawRightEye(rdx, ldy);
drawNose();
drawSmile();
}, false);
function degreesToRadians(degrees) {
radians = (degrees * Math.PI)/180;
return radians;
}
</script>
</body>
</html>
Output :
Good
ReplyDeleteGood
ReplyDelete