Maison > Article > interface Web > Partager un exemple de code pour créer des visages à l'aide de HTML5 Canvas

Partager un exemple de code pour créer des visages à l'aide de HTML5 Canvas

零下一度original: 2017-05-04 15:26:453054parcourir

Le Canvas de HTML5 est ici principalement utilisé pour le dessin. Exemple de code pour créer des visages en utilisant HTML5.

Regardons d'abord le rendu du visage que nous voulons dessiner :

用 HTML5 绘制人脸

Ici, nous utilisons principalement HTML5 Canvas pour dessiner.

Commençons tout le processus de dessin :

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. 🎜>【Recommandations associées】

// 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 = &#39;center&#39;;
    ctx.fillStyle = &#39;#000&#39;;

    ctx.font = &#39;30px Verdana&#39;;
    if (iSel == 0)
        ctx.font = &#39;bold 30px Verdana&#39;;
    ctx.fillText(&#39;< Head >&#39;, 400, 80);

    ctx.font = &#39;30px Verdana&#39;;
    if (iSel == 1)
        ctx.font = &#39;bold 30px Verdana&#39;;
    ctx.fillText(&#39;< Eye >&#39;, 400, 180);

    ctx.font = &#39;30px Verdana&#39;;
    if (iSel == 2)
        ctx.font = &#39;bold 30px Verdana&#39;;
    ctx.fillText(&#39;< Nose >&#39;, 400, 280);

    ctx.font = &#39;30px Verdana&#39;;
    if (iSel == 3)
        ctx.font = &#39;bold 30px Verdana&#39;;
    ctx.fillText(&#39;< Mouth >&#39;, 400, 380);
}

// -------------------------------------------------------------

// initialization
$(function(){
    canvas = document.getElementById(&#39;scene&#39;);
    ctx = canvas.getContext(&#39;2d&#39;);

    // initialization of dragon
    var oHeadImage = new Image();
    oHeadImage.src = &#39;images/image.png&#39;;
    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(&#39;canvas&#39;);
                temp_ctx = temp_canvas.getContext(&#39;2d&#39;);
                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();
                $(&#39;#face_result&#39;).attr(&#39;src&#39;, vData);
                break;
        }
    }); 

    setInterval(drawScene, 40); // loop drawScene
});

Tutoriel vidéo en ligne h5 gratuit

2 Manuel de la version complète HTML5

3. . Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à l'utilisation de Phonegap (6) Comment obtenir des informations sur l'appareilArticle suivant：Introduction à l'utilisation de Phonegap (6) Comment obtenir des informations sur l'appareil

Articles Liés

Voir plus