Partager un exemple de code pour créer des visages à l'aide de HTML5 Canvas-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

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

May 04, 2017 pm 03:26 PM

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)

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; &gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot; /&gt;

        &lt;title&gt;HTML5 Face Builder | Script Tutorials&lt;/title&gt;

        &lt;link href=&quot;css/main.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;

        &lt;script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;header&gt;
            &lt;h2&gt;HTML5 image crop tool&lt;/h2&gt;
            &lt;a href=&quot;http://www.script-tutorials.com/html5-face-builder/&quot; class=&quot;stuts&quot;&gt;Back to original tutorial on &lt;span&gt;Script Tutorials&lt;/span&gt;&lt;/a&gt;

        &lt;/header&gt;
        &lt;p class=&quot;container&quot;&gt;
            &lt;canvas id=&quot;scene&quot; width=&quot;500&quot; height=&quot;500&quot;&gt;&lt;/canvas&gt;

            &lt;p id=&quot;results&quot;&gt;
                &lt;h2&gt;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.&lt;/h2&gt;
                &lt;img id=&quot;face_result&quot; /&gt;
            &lt;/p&gt;

        &lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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;&lt; Head &gt;&#39;, 400, 80);

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

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

    ctx.font = &#39;30px Verdana&#39;;
    if (iSel == 3)
        ctx.font = &#39;bold 30px Verdana&#39;;
    ctx.fillText(&#39;&lt; Mouth &gt;&#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 &lt; 0) {
                    iSel = 3;
                }
                break;
            case 40: // Up key
                iSel++;
                if (iSel &gt;= 4) {
                    iSel = 0;
                }
                break;
            case 37: // Left key

                // update sprite positions
                if (iSel == 0) {
                    oHead.iSpr--;
                    if (oHead.iSpr &lt; 0) {
                        oHead.iSpr = 3;
                    }
                }
                if (iSel == 1) {
                    oEye.iSpr--;
                    if (oEye.iSpr &lt; 0) {
                        oEye.iSpr = 4;
                    }
                }
                if (iSel == 2) {
                    oNose.iSpr--;
                    if (oNose.iSpr &lt; 0) {
                        oNose.iSpr = 4;
                    }
                }
                if (iSel == 3) {
                    oMouth.iSpr--;
                    if (oMouth.iSpr &lt; 0) {
                        oMouth.iSpr = 4;
                    }
                }
                break;
            case 39: // Right key

                // update sprite positions
                if (iSel == 0) {
                    oHead.iSpr++;
                    if (oHead.iSpr &gt;= 4) {
                        oHead.iSpr = 0;
                    }
                }
                if (iSel == 1) {
                    oEye.iSpr++;
                    if (oEye.iSpr &gt;= 5) {
                        oEye.iSpr = 0;
                    }
                }
                if (iSel == 2) {
                    oNose.iSpr++;
                    if (oNose.iSpr &gt;= 5) {
                        oNose.iSpr = 0;
                    }
                }
                if (iSel == 3) {
                    oMouth.iSpr++;
                    if (oMouth.iSpr &gt;= 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
});

Copier après la connexion

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 de ce site Web

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