我無法將自己的繪圖作爲自己的功能

因此，在我的課程中，我們正在學習如何在HTML5中製作動畫。我們給了一個只有4個形狀的樣本，所以我做了一個雲。然而，正如你所看到的那樣，有一個function drawCircle();，如果我把代碼畫在我的雲下，它會出現在畫布上，但如果我製作function drawCloud();，它根本不會顯示出來。我甚至在代碼的末尾調用函數，但仍然沒有任何結果。任何人都知道爲什麼或如何解決此問題？我無法將自己的繪圖作爲自己的功能

<!DOCTYPE html> 
<!-- Demonstrates canvas drawing using drawing methods --> 
<html> 
<body style="text-align:center"> 
    <h1>HTML5 Canvas Drawing</h1> 
    <canvas id="myCanvas" width="800" height="500" style="border:2px solid #BBBBBB;"> 
    </canvas> 

    <script> 
     var canv=document.getElementById("myCanvas"); 
     var c=canv.getContext("2d"); 

     var w = canv.width; 
     var h = canv.height; 

     function drawRectangle(){ 
      c.fillStyle="rgb(100,200, 240)"; 
      c.fillRect(100,100,200,200); 

      c.strokeStyle="black"; 
      c.lineWidth=4; 
      c.strokeRect(100,100,200,200); 
     } 

//  function drawCircle(){ 
//   c.fillStyle="red"; 
//   c.strokeStyle="black"; 
//   c.lineWidth=2; 
//   c.beginPath(); 
//   c.arc(550, 200, 100, 0, Math.PI*2); //x, y, radius, start angle, end angle 
//   c.closePath(); 
//   c.fill(); 
//   c.stroke(); 
//  } 

     function drawCircle(){ 
      c.beginPath(); 
      c.moveTo(170, 80); 
      c.bezierCurveTo(130, 100, 130, 150, 230, 150); 
       c.bezierCurveTo(250, 180, 320, 180, 340, 150); 
       c.bezierCurveTo(420, 150, 420, 120, 390, 100); 
       c.bezierCurveTo(430, 40, 370, 30, 340, 50); 
       c.bezierCurveTo(320, 5, 250, 20, 250, 50); 
       c.bezierCurveTo(200, 5, 150, 20, 170, 80); 

      // complete custom shape 
       c.closePath(); 
       c.lineWidth = 5; 
       c.strokeStyle = 'red'; 
       c.stroke(); 
     } 

     function drawTriangle(){ 
      c.beginPath(); 
      c.lineWidth=3; 
      c.strokeStyle="Blue"; 
      c.moveTo(200,350); 
      c.lineTo(100,450); 
      c.lineTo(300,450); 
      c.lineTo(200,350); 
      c.fillStyle="yellow"; 
      c.closePath(); 
      c.fill(); 
      c.stroke(); 
     }  

    drawRectangle(); 
    drawCircle(); 
    drawArc(); 
    drawTriangle(); 
    drawCloud(); 

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

來源

2017-04-02 Jim Derkin

問題是，沒有任何稱爲drawCloud的函數。您將函數drawCircle命名爲假設繪製雲。將該函數重命名爲drawCloud並註釋掉實際的drawCircle函數。另外，沒有必要使用closePath()方法。

這裏是你的代碼的固定版本

var canv = document.getElementById("myCanvas"); 
 
var c = canv.getContext("2d"); 
 
var w = canv.width; 
 
var h = canv.height; 
 

 
function drawRectangle() { 
 
    c.fillStyle = "rgb(100,200, 240)"; 
 
    c.fillRect(100, 100, 200, 200); 
 
    c.strokeStyle = "black"; 
 
    c.lineWidth = 4; 
 
    c.strokeRect(100, 100, 200, 200); 
 
} 
 

 
function drawCircle() { 
 
    c.fillStyle = "red"; 
 
    c.strokeStyle = "black"; 
 
    c.lineWidth = 2; 
 
    c.beginPath(); 
 
    c.arc(550, 200, 100, 0, Math.PI * 2); //x, y, radius, start angle, end angle 
 
    c.fill(); 
 
    c.stroke(); 
 
} 
 

 
function drawCloud() { 
 
    c.beginPath(); 
 
    c.moveTo(170, 80); 
 
    c.bezierCurveTo(130, 100, 130, 150, 230, 150); 
 
    c.bezierCurveTo(250, 180, 320, 180, 340, 150); 
 
    c.bezierCurveTo(420, 150, 420, 120, 390, 100); 
 
    c.bezierCurveTo(430, 40, 370, 30, 340, 50); 
 
    c.bezierCurveTo(320, 5, 250, 20, 250, 50); 
 
    c.bezierCurveTo(200, 5, 150, 20, 170, 80); 
 
    // complete custom shape 
 
    c.lineWidth = 5; 
 
    c.strokeStyle = 'red'; 
 
    c.stroke(); 
 
} 
 

 
function drawTriangle() { 
 
    c.beginPath(); 
 
    c.lineWidth = 3; 
 
    c.strokeStyle = "Blue"; 
 
    c.moveTo(200, 350); 
 
    c.lineTo(100, 450); 
 
    c.lineTo(300, 450); 
 
    c.lineTo(200, 350); 
 
    c.fillStyle = "yellow"; 
 
    c.fill(); 
 
    c.stroke(); 
 
} 
 

 
drawRectangle(); 
 
drawCircle(); 
 
drawCloud(); 
 
drawTriangle();

<canvas id="myCanvas" width="800" height="500" style="border:2px solid #BBBBBB;"></canvas>

來源

2017-04-02 18:14:20

我無法將自己的繪圖作爲自己的功能

回答

相關問題