Question

所以在我的班上我们学习如何在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>

Answer 1

问题是，没有任何名为drawCloud的函数。您将函数drawCircle命名为绘制云。将该函数重命名为drawCloud并注释掉实际的drawCircle函数。此外，无需使用closePath()方法。

以下是代码的固定版本

＆＃13;

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();

＆＃13;

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

＆＃13;

我无法将画布作为自己的功能

1 个答案: