Question

我正在尝试用画布制作一张幸福的脸和一张悲伤的脸，但问题是我不能让两张脸出现，只有一张。

    <!DOCTYPE html>

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

    <canvas id="myDrawing" width="800" height="200" style="border:1px solid #EEE">
    </canvas>
            <script>
               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 = 150
                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();

// SECOND FACE - HAPPY FACE 

<canvas id="canvas" width="200" height="200" style="border:1px solid #EEE">
    </canvas>
            <script>
               var canvas = document.getElementById("canvas");
                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 = 150
                var radius = 40;
                var startAngle = 1.9 * Math.PI;
                var endAngle = 1.1 * 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>
</body>
</html>

由于某些原因，我只能让其中一张脸出现，但我想要同时出现这两张脸！

Answer 1

你不能拥有同名的多个函数，因为第二个函数会覆盖（隐藏）第一个函数;如果它们位于相同的<script>标签中并不重要（它们甚至可以位于不同的文件中）

如果您是初学者，则更改第二张脸的功能名称，但您应该为该功能提供参数，让您可以使用单一功能在多个画布和形状之间进行选择

它看起来像这样： http://jsfiddle.net/Y5rUH/2/

试图用帆布制作2个快乐/悲伤的面孔

1 个答案: