Question

我正在尝试使用canvas标签和javascript制作笑脸。我把face的各个组件作为自己的方法（drawFace（），drawEyes（），drawSmile（））。我在代码的底部有这些方法。但没有任何表现。当我删除这些方法并将所有代码放入一个巨大的方法时，它将显示。

如何使用这些方法显示脸部？

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My Site's Title</title>
</head>
<body>

    <canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE">
    </canvas>
            <script>
                function drawFace() {
                    var canvas = document.getElementById("myDrawing");
                    var ctx = canvas.getContext("2d");

                    var x = canvas.width / 2;
                    var y = canvas.height / 2;
                    var radius = 75;
                    var startAngle = 0;
                    var endAngle = 2 * Math.PI;

                    ctx.beginPath();
                    ctx.arc(x, y, radius, startAngle, endAngle);
                    ctx.stroke();
                    ctx.fillStyle = "yellow";
                    ctx.fill();
                    }

                    function drawSmile(){
                    var x = canvas.width / 2;
                    var y = 160
                    var radius = 40;
                    var startAngle = 1.1 * Math.PI;
                    var endAngle = 1.9 * Math.PI;

                    ctx.beginPath();
                    ctx.arc(x, y, radius, startAngle, endAngle);
                    ctx.lineWidth = 7;

                    // line color
                    ctx.strokeStyle = 'black';
                    ctx.stroke();
                    }


                    function drawEyes{
                    var centerX = 40;
                    var centerY = 0;
                    var radius = 10;

                    // save state
                    ctx.save();

                    // translate context so height is 1/3'rd from top of enclosing circle
                    ctx.translate(canvas.width / 2, canvas.height / 3);

                    // scale context horizontally by 50%
                    ctx.scale(.5, 1);

                    // draw circle which will be stretched into an oval
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

                    // restore to original state
                    ctx.restore();

                    // apply styling
                    ctx.fillStyle = 'black';
                    ctx.fill();
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = 'black';
                    ctx.stroke();

                    //left eye
                    var centerX = -40;
                    var centerY = 0;
                    var radius = 10;

                    // save state
                    ctx.save();

                    // translate context so height is 1/3'rd from top of enclosing circle
                    ctx.translate(canvas.width / 2, canvas.height / 3);

                    // scale context horizontally by 50%
                    ctx.scale(.5, 1);

                    // draw circle which will be stretched into an oval
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

                    // restore to original state
                    ctx.restore();

                    // apply styling
                    ctx.fillStyle = 'black';
                    ctx.fill();
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = 'black';
                    ctx.stroke();
                    }
                    drawFace()

   function drawHappyFace(){
   drawFace();
   drawEyes();
   drawSmile();
}

drawHappyFace();

            </script>        
</body>
</html>

Answer 1

用以下代码替换javascript。 Here is the fiddle

在定义drawEyes函数时没有放“（）”。您正在其他函数中使用ctx，您在第一个应该是全局的函数中定义。可能需要在全球范围内定义其他一些变量。

var canvas = document.getElementById("myDrawing");
                var ctx = canvas.getContext("2d");

                var x = canvas.width / 2;
                var y = canvas.height / 2;
                var radius = 75;
                var startAngle = 0;
                var endAngle = 2 * Math.PI;
 function drawFace() {


                ctx.beginPath();
                ctx.arc(x, y, radius, startAngle, endAngle);
                ctx.stroke();
                ctx.fillStyle = "yellow";
                ctx.fill();
                }

                function drawSmile(){
                var x = canvas.width / 2;
                var y = 160
                var radius = 40;
                var startAngle = 1.1 * Math.PI;
                var endAngle = 1.9 * Math.PI;

                ctx.beginPath();
                ctx.arc(x, y, radius, startAngle, endAngle);
                ctx.lineWidth = 7;

                // line color
                ctx.strokeStyle = 'black';
                ctx.stroke();
                }


                function drawEyes(){
                var centerX = 40;
                var centerY = 0;
                var radius = 10;

                // save state
                ctx.save();

                // translate context so height is 1/3'rd from top of enclosing circle
                ctx.translate(canvas.width / 2, canvas.height / 3);

                // scale context horizontally by 50%
                ctx.scale(.5, 1);

                // draw circle which will be stretched into an oval
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

                // restore to original state
                ctx.restore();

                // apply styling
                ctx.fillStyle = 'black';
                ctx.fill();
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'black';
                ctx.stroke();

                //left eye
                var centerX = -40;
                var centerY = 0;
                var radius = 10;

                // save state
                ctx.save();

                // translate context so height is 1/3'rd from top of enclosing circle
                ctx.translate(canvas.width / 2, canvas.height / 3);

                // scale context horizontally by 50%
                ctx.scale(.5, 1);

                // draw circle which will be stretched into an oval
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

                // restore to original state
                ctx.restore();

                // apply styling
                ctx.fillStyle = 'black';
                ctx.fill();
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'black';
                ctx.stroke();
                }
                drawFace()

   function drawHappyFace(){
   drawFace();
   drawEyes();
   drawSmile();
}

drawHappyFace();

Answer 2

在drawHappyFace函数声明之前，您有一个额外的drawFace（）函数调用。并且它之后没有分号，因此会导致语法错误。

Answer 3

首先，您在drawEyes()函数上缺少函数参数括号。我注意到你在这个函数中也有很多重复的逻辑。

下面，我重构了你的代码以删除任何幻数。您现在可以绘制任意大小的面部并将其放置在画布上的任何位置。

// =========================================================
// Main
// =========================================================
var canvas = document.getElementById("myDrawing");

drawHappyFace(canvas, {
    fill: '#00FF00',
    lineColor: '#6F0047'
}, true);

drawHappyFace(canvas, {
    fill: '#FFFF00',
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius : 178
});

// =========================================================
// Functons
// =========================================================
function drawFace(canvas, opts) {
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.lineWidth = opts.radius * 0.075;
    ctx.strokeStyle = opts.lineColor;
    ctx.beginPath();
    ctx.arc(opts.x, opts.y, opts.radius, opts.startAngle, opts.endAngle);
    ctx.stroke();
    ctx.fillStyle = opts.fill;
    ctx.fill();
    ctx.restore();
}

function drawSmile(canvas, opts, flipSmile) {
    var ctx = canvas.getContext("2d");
    var radius = 40 * opts.radius * 0.0125;
    var x = opts.x;
    var y, startAngle, endAngle;
        
    if (flipSmile) {
        y = opts.y + opts.radius * 0.7;
        startAngle = -Math.PI * 0.85; //Math.PI * 0.1;
        endAngle = -0.5; //-Math.PI * 1.1;
    } else {
        y = opts.y + opts.radius * 0.1;
        startAngle = Math.PI * 0.1;
        endAngle = -Math.PI * 1.1;
    }

    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle);
    ctx.lineWidth = opts.radius * 0.1;

    ctx.strokeStyle = opts.lineColor;
    ctx.stroke();
    ctx.restore();
}

function drawEyes(canvas, opts) {
    var xOffset = opts.radius * 0.5;
    var radius = opts.radius * 0.15;

    drawEye(canvas, opts, xOffset, 0, radius); // Left
    drawEye(canvas, opts, -xOffset, 0, radius); // Right
}

function drawEye(canvas, opts, centerX, centerY, radius) {
    var ctx = canvas.getContext("2d");

    // Save state
    ctx.save();

    // Translate context so height is 1/3'rd from top of enclosing circle
    ctx.translate(opts.x, opts.y - (opts.radius / 3));

    // Scale context horizontally by 50%
    ctx.scale(0.5, 1);

    // Draw circle which will be stretched into an oval
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

    // Apply styling
    ctx.fillStyle = opts.lineColor;
    ctx.fill();
    ctx.lineWidth = radius * 0.75;
    ctx.strokeStyle = opts.lineColor;
    ctx.stroke();
    
    // Restore to original state
    ctx.restore();
}

function drawHappyFace(canvas, opts, flipSmile) {
    opts = opts || {};
    
    var defaultRadius = 48;
    var options = {
        x: opts.x || (defaultRadius / 0.9),
        y: opts.y || (defaultRadius / 0.9),
        radius: opts.radius || defaultRadius,
        startAngle: 0,
        endAngle: 2 * Math.PI,
        fill: opts.fill || 'yellow',
        lineColor: opts.lineColor || 'black'
    };
    
    drawFace(canvas, options);
    drawEyes(canvas, options);
    drawSmile(canvas, options, flipSmile);
}

#myDrawing {
    border: 2px solid #6F6F6F;
    background: #DFDFDF;
}

<canvas id="myDrawing" width="500" height="500"></canvas>

绘制和显示笑脸（不显示）

3 个答案: