試圖用帆布做出2個快樂/悲傷的面孔

我目前正在試圖用帆布做出1個快樂的臉和1個傷心的臉，但問題是我不能讓2個臉出現，只有一個。試圖用帆布做出2個快樂/悲傷的面孔

<!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>

因爲某種原因，我只能得到其中一張臉，因爲某種原因，我同時想要兩張臉！

來源

2014-01-11 Rory Galloway

移動你的代碼http://jsfiddle.net – Adassko

我無法證實這一點：這將讓你使用單一功能

多個畫布和形狀之間選擇它可以像這樣的功能。我可以看到兩張臉，請參閱http://jsfiddle.net/Y5rUH/ –

@OlafDietsche他們都很高興:-) – rene

你不能有多個具有相同名稱的函數，因爲第二個覆蓋（隱藏）第一個;不要緊，如果他們在相同的<script>標籤或沒有（他們甚至可以在不同的文件中）

如果您是初學者，請更改第二張臉的功能名稱，但您應該提供參數 http://jsfiddle.net/Y5rUH/2/

來源

2014-01-11 17:31:46 Adassko

試圖用帆布做出2個快樂/悲傷的面孔

回答

相關問題