分享利用 HTML5 的 Canvas 制作人脸的实例代码

程序员文章站 2022-04-18 15:01:40

...

这里主要使用了 HTML5 的 Canvas 进行绘制。利用html5制作人脸的实例代码。

先看我们要绘制的人脸效果图：

这里主要使用了 HTML5 的 Canvas 进行绘制。

下面我们开始整个绘制过程：

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
});

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上就是分享利用 HTML5 的 Canvas 制作人脸的实例代码的详细内容，更多请关注其它相关文章！

分享利用 HTML5 的 Canvas 制作人脸的实例代码

html5的画布canvas——画出简单的矩形、三角形实例代码

利用HTML5 Canvas制作一个简单的打飞机游戏

利用canvas实现的加载动画效果实例代码

利用HTML5 Canvas制作键盘及鼠标动画的实例分享

html5 canvas绘制矩形和圆形的实例代码

HTML5实例之CSS3制作的三级下拉菜单（代码）

HTML5利用约束验证API来检查表单的输入数据的代码实例

分享一个用h5制作的网页版扫雷游戏实例代码

html5实现留言板的代码实例分享

HTML5基础模板的实例代码分享