我无法将自己的绘图作为自己的功能

因此，在我的课程中，我们正在学习如何在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

我无法将自己的绘图作为自己的功能

回答

相关问题