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

百变鹏仔 3个月前 (10-18) #H5教程

文章标签制作人

这里主要使用了 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" / alt="分享利用 HTML5 的 Canvas 制作人脸的实例代码" >            </p>        </p>    </body></html>

2. js/script.js

// inner variablesvar 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});

【

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集