Here we mainly use the Canvas of HTML5 for drawing. Example code for making faces using html5.
Let’s first look at the face rendering we want to draw:
Here we mainly use HTML5 Canvas for drawing.
Let’s start the entire drawing process:
1. HTML (index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Face Builder | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header>
<h2>HTML5 image crop tool</h2>
<a href="http://www.script-tutorials.com/html5-face-builder/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<p class="container">
<canvas id="scene" width="500" height="500"></canvas>
<p id="results">
<h2>Use arrow keys to select your face details (up-down to select category, left-right to switch them), then click Spacebar to export as image.</h2>
<img id="face_result" />
</p>
</p>
</body>
</html>2. js/script.js
// inner variables
var canvas, ctx;
var oHead, oEye, oNose, oMouth;
var iSel = 0;
// -------------------------------------------------------------
// objects :
function Head(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
function Eye(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
function Nose(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
function Mouth(x, y, x2, y2, w, h, image) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.w = w;
this.h = h;
this.image = image;
this.iSpr = 0;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
clear(); // clear canvas
// draw head
ctx.drawImage(oHead.image, oHead.x2 + oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);
// draw eyes
ctx.drawImage(oEye.image, oEye.x2 + oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);
// draw nose
ctx.drawImage(oNose.image, oNose.x2 + oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);
// draw mouth
ctx.drawImage(oMouth.image, oMouth.x2 + oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);
// draw controls
ctx.textAlign = 'center';
ctx.fillStyle = '#000';
ctx.font = '30px Verdana';
if (iSel == 0)
ctx.font = 'bold 30px Verdana';
ctx.fillText('< Head >', 400, 80);
ctx.font = '30px Verdana';
if (iSel == 1)
ctx.font = 'bold 30px Verdana';
ctx.fillText('< Eye >', 400, 180);
ctx.font = '30px Verdana';
if (iSel == 2)
ctx.font = 'bold 30px Verdana';
ctx.fillText('< Nose >', 400, 280);
ctx.font = '30px Verdana';
if (iSel == 3)
ctx.font = 'bold 30px Verdana';
ctx.fillText('< Mouth >', 400, 380);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
// initialization of dragon
var oHeadImage = new Image();
oHeadImage.src = 'images/image.png';
oHeadImage.onload = function() {};
oHead = new Head(0, 0, 0, 755, 300, 405, oHeadImage);
oEye = new Eye(40, 70, 0, 120, 235, 80, oHeadImage);
oNose = new Nose(70, 120, 0, 276, 180, 140, oHeadImage);
oMouth = new Mouth(60, 260, 0, 546, 170, 120, oHeadImage);
$(window).keydown(function(event){
switch (event.keyCode) {
case 38: // Up key
iSel--;
if (iSel < 0) {
iSel = 3;
}
break;
case 40: // Up key
iSel++;
if (iSel >= 4) {
iSel = 0;
}
break;
case 37: // Left key
// update sprite positions
if (iSel == 0) {
oHead.iSpr--;
if (oHead.iSpr < 0) {
oHead.iSpr = 3;
}
}
if (iSel == 1) {
oEye.iSpr--;
if (oEye.iSpr < 0) {
oEye.iSpr = 4;
}
}
if (iSel == 2) {
oNose.iSpr--;
if (oNose.iSpr < 0) {
oNose.iSpr = 4;
}
}
if (iSel == 3) {
oMouth.iSpr--;
if (oMouth.iSpr < 0) {
oMouth.iSpr = 4;
}
}
break;
case 39: // Right key
// update sprite positions
if (iSel == 0) {
oHead.iSpr++;
if (oHead.iSpr >= 4) {
oHead.iSpr = 0;
}
}
if (iSel == 1) {
oEye.iSpr++;
if (oEye.iSpr >= 5) {
oEye.iSpr = 0;
}
}
if (iSel == 2) {
oNose.iSpr++;
if (oNose.iSpr >= 5) {
oNose.iSpr = 0;
}
}
if (iSel == 3) {
oMouth.iSpr++;
if (oMouth.iSpr >= 5) {
oMouth.iSpr = 0;
}
}
break;
case 32: // Spacebar key - export results
var temp_ctx, temp_canvas;
temp_canvas = document.createElement('canvas');
temp_ctx = temp_canvas.getContext('2d');
temp_canvas.width = 360;
temp_canvas.height = 410;
// draw head
temp_ctx.drawImage(oHead.image, oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);
// draw eyes
temp_ctx.drawImage(oEye.image, oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);
// draw nose
temp_ctx.drawImage(oNose.image, oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);
// draw mouth
temp_ctx.drawImage(oMouth.image, oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);
var vData = temp_canvas.toDataURL();
$('#face_result').attr('src', vData);
break;
}
});
setInterval(drawScene, 40); // loop drawScene
});【Related Recommended】
1. Free h5 online video tutorial
3. php.cn original html5 video tutorial
The above is the detailed content of Share example code for making faces using HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
