怎么利用HTML5中Canvas制作人脸-创新互联

这篇文章给大家分享的是有关怎么利用HTML5中Canvas制作人脸的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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

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

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

1. HTML (index.html)

    
        

        

        

        
        
    
    

        

            
HTML5 image crop tool
            Back to original tutorial on Script Tutorials

        
        
            

            
                
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.
                
            


        

    

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

感谢各位的阅读！关于“怎么利用HTML5中Canvas制作人脸”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！